Signature Pad

A component for capturing and displaying handwritten signatures.

Label

Anatomy

Usage

<script>
  import {SignaturePad} from 'ui-ingredients';
</script>

<SignaturePad.Root>
  {#snippet children(context)}
    <SignaturePad.Label>Label</SignaturePad.Label>

    <SignaturePad.Control>
      <SignaturePad.Segment>
        {#each context.paths as path}
          <SignaturePad.SegmentPath {path} />
        {/each}

        <SignaturePad.CurrentSegmentPath />
      </SignaturePad.Segment>
      <SignaturePad.Guide />
    </SignaturePad.Control>
    <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
  {/snippet}
</SignaturePad.Root>

API Reference

Root

Prop	Default	Description
`disabled`		`boolean` Whether the signature pad is disabled.
`drawing`	`{ size: 2, simulatePressure: true, }`	`DrawingOptions` The drawing options.
`id`		`string` The unique identifier of the machine.
`ids`		`{ root?: string; control?: string; hiddenInput?: string; label?: string; }` The ids of the signature pad elements. Useful for composition.
`name`		`string` The name of the signature pad. Useful for form submission.
`onDraw`		`(details: DrawDetails) => void` Callback when the signature pad is drawing.
`onDrawEnd`		`(details: DrawEndDetails) => void` Callback when the signature pad is done drawing.
`readOnly`		`boolean` Whether the signature pad is read-only.
`required`		`boolean` Whether the signature pad is required.
`translations`		`IntlTranslations` The translations of the signature pad. Useful for internationalization.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	root
`data-scope`	signature-pad

ClearTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Control

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	control
`data-scope`	signature-pad

Guide

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	guide
`data-scope`	signature-pad

HiddenInput

Prop	Default	Description
`value`		`string`
`asChild`		`Snippet` Render a different element.

Label

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	label
`data-scope`	signature-pad

Segment

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

SegmentPath

Prop	Default	Description
`asChild`		`Snippet` Render a different element.