Lets a user sign by drawing or by typing their name and choosing a font, chosen via a Draw/Type toggle. Works the same on web and mobile and emits a discriminated value the consumer can persist and re-render.
Signature
Draw
Type
Full name
Dancing Script
Great Vibes
Sacramento
Caveat
Type your full name
Usage Guidelines
Do
Offer both draw and type so users can sign however works best on their device.
Tell the user why an error has occurred (e.g. a signature is required).
Don't
Do not assume the value is always a drawn image — branch on the `mode` discriminant.
Props
Name
Type
Required
Description
onChange
Required
defaultMode
SignatureMode
Which capture method is shown first when the field is empty. Ignored once
disabled
boolean
errorText
string
fonts
Fonts offered in "type" mode. Defaults to the library's bundled signature fonts. When
supplying a custom list, the consumer must load those font families themselves.
fullWidth
boolean
Stretches the draw pad to the full available width.
helperText
string
nameLabel
string
Label for the typed name input. Defaults to "Full name".
onEnd
Fired when the signer stops drawing — use to re-enable a parent ScrollView.
onStart
Fired when the signer starts drawing — use to disable a parent ScrollView.
placeholder
string
Placeholder for the typed name input. Defaults to "Type your full name".
testID
string
Root test id for the primary interactive element or container.
testIDs
FieldTestIDs
title
string
Section title rendered above the field. Defaults to "Signature".
value
SignatureCaptureValue
Controlled value. When omitted the field starts empty in
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Signature field, Typed signature field
Examples
Signature Capture Field
Signature
Draw
Type
Full name
Dancing Script
Great Vibes
Sacramento
Caveat
Type your full name
Draw Mode First
Signature
Draw
Type
Clear
Draw your signature above, then it will be saved automatically.
Signature Capture Field With Error
Signature
A signature is required.
Draw
Type
Full name
Dancing Script
Great Vibes
Sacramento
Caveat
Type your full name
Your signature will be printed on all notes going forward.