Signature Pad

The Signature Pad captures a freehand signature from the user. It supports an empty waiting state and a signed state that confirms capture. Used in consent, contracts, and identity affirmation flows.

Anatomy

States

Empty.signature-pad

The dashed canvas invites the user to sign with finger or stylus.

Signed.signature-pad.has-ink

Once ink exists, Clear and Confirm actions become available.

Tokens

TokenRoleLayer

--sig-surfacePad backgroundComponent

--sig-borderPad border colorComponent

--sig-baselineSignature baseline colorComponent

--sig-inkDrawn stroke colorComponent

--sig-signed-bgSigned state backgroundComponent

--radius-sigPad corner radiusSemantic

Component tokens

The color tokens for this component live in Color → Tokens, and its spacing, radius, and type map to the shared foundation scales.