SignaturePad — Loidolt Theme

import { SignaturePad } from '@loidolt/theme-svelte';

Example

Sign with a mouse, pen or finger.

Not signed yet

Typing is the route for keyboard, switch and voice users (WCAG 2.1.1 and 2.5.1). Keep modes to both unless you offer another way to the same outcome.
A signature counts only once it is long enough (minStrokeLength, minTypedLength); until then value is null, which makes required meaningful.
Both modes produce a PNG dataUrl; drawn signatures also carry the strokes and an SVG. With name, the PNG is submitted with the form.
The ink follows the theme's text colour. Load any fonts you list in fonts yourself — nothing is fetched from a font service.
Legal consent wording belongs to your app: pair the pad with a Checkbox rather than expecting the pad to carry it.

Generated from the component source, so it cannot drift from the implementation.

SignaturePad props
Prop	Type	Default	Notes
`label` required	`string`	`—`	Names the pad for assistive tech, e.g. "Customer signature".
`class`	`string`	`—`
`clearLabel`	`string`	`'Clear'`
`disabled`	`boolean`	`false`
`drawHint`	`string`	`'Sign with a mouse, pen or finger.'`	Guidance under the drawing area.
`drawLabel`	`string`	`'Draw'`
`fontLabel`	`string`	`'Style'`
`fonts`	`Array<{ family: string; label: string }>`	`[{ family: 'cursive', label: 'Script' }]`	Fonts offered in `type` mode. Load them yourself; the default is the system script face.
`minStrokeLength`	`number`	`20`	Drawn length, in pixels, below which a signature does not count.
`minTypedLength`	`number`	`2`
`mode` bindable	`Mode`	`modes[0] ?? 'draw'`
`modeLabel`	`string`	`'Signature method'`
`modes`	`Mode[]`	`['draw', 'type']`	Ways to sign. Typing is the keyboard- and switch-accessible alternative to drawing (WCAG 2.1.1, 2.5.1); drop it only if you offer another route to the same outcome.
`name`	`string`	`—`	Submits the PNG data URL with a form.
`onValueChange`	`(value: SignatureValue \| null) => void`	`—`
`ref` bindable	`HTMLDivElement \| null`	`null`
`required`	`boolean`	`false`
`strokeColor`	`string`	`—`	Ink colour. Defaults to the text colour, so it follows the theme.
`strokeWidth`	`number`	`2.5`
`typeLabel`	`string`	`'Type'`
`typePlaceholder`	`string`	`'Type your full name'`
`undoLabel`	`string`	`'Undo'`
`value` bindable	`SignatureValue \| null`	`null`	The accepted signature, or `null` while there is none. Bindable.

Plus the attributes of Omit<HTMLAttributes<HTMLDivElement>, 'children'>, forwarded to the root element.