All components (204)

Signature

Fields · SignatureField

What it is and when to use it

Signing a delivery note or a consent form, in two ways: drawing in the box or typing the full name. The second is not decoration: signing by drawing is impossible with a keyboard, a switch device or a head mouse. It is chosen with a button group, and the chosen option takes precedence.

When to use it

The delivery of an order, the approval of a quote, a simple consent.
alert for the fine print: what the signer is committing to.
value and onChange carry the signature: { mode: 'stroke', image } when drawing (a PNG) or { mode: 'written', name } when typing. height changes the height of the box.
signatureDone(value) says whether something has really been signed (a name of three letters or more, or a stroke), and signatureError(value, mode) what to say if it is missing.

When not to

You only need to accept some terms: Checkbox.
Asking for the name without it counting as a signature: TextField.

Keyboard: Tab reaches the "How do you want to sign" group, where the arrow keys switch between "Draw" and "Type", and then the name field or, if there is a stroke, the "Clear and sign again" button. The drawing box cannot be reached with the keyboard: that is what signing by typing is for.

Accessibility: the block is a group named like label and described by the alert, so whoever arrives by tabbing hears what is being signed and what it commits to. The box explains itself ("Sign by drawing with your finger or mouse. If you cannot, switch to typing") and the error appears in a role="alert". Switching the way of signing erases the previous one. The stroke is output as a PNG when the finger is lifted, not on every point (a tap without moving does not count as a signature), and touch-action: none prevents the phone from taking the stroke for a page scroll.

Fine-tuning: no variables of its own: adjust it with the classes amset-signature__header, amset-signature__box, amset-signature__canvas, amset-signature__footer, amset-signature__alert and amset-signature__error. The stroke is painted with the canvas text color. The box takes the width of its container and draws at the real resolution of the screen (devicePixelRatio): the stroke lands under the finger at any width, and if the box changes size, what was signed is redrawn in place.

What it looks like

<SignatureField
  label="Recipient's signature"
  alert="By signing you confirm that the order arrived complete and in good condition."
  value={firma}
  onChange={setFirma}
/>

Props

Import it with import { SignatureField } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	What is being signed. Required: it names the block.
`onChange`required	`(signature: Signature \| null) => void`	—
`value`required	`Signature \| null`	—
`alert`	`string`	The small print below: what the signer commits to.
`className`	`string`	Merged with the library classes; it does not replace them.
`disabled`	`boolean`	—
`error`	`string`	—
`height`	`number`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: