Lets a user type their name and choose a signature font with a live preview. Works the same on web and mobile, and emits a typed name plus a stable font key for persistence.
Signature
Full name
Dancing Script
Great Vibes
Sacramento
Caveat
Type your full name
Usage Guidelines
Do
Show the live preview so the user can confirm their signature before saving.
Tell the user why an error has occurred (e.g. a signature is required).
Don't
Do not persist the raw font family; persist the stable font key instead.
Props
Name
Type
Required
Description
onChange
Required
disabled
boolean
errorText
string
fonts
Selectable fonts. Defaults to the library's bundled signature fonts. When supplying a
custom list, the consumer is responsible for loading those font families (e.g. via
expo-font) so the preview renders correctly.
helperText
string
nameLabel
string
Label for the name input. Defaults to "Full name".
placeholder
string
Placeholder for the 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
TypedSignatureValue
Controlled value. When omitted the field starts empty with the first font selected.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Signature field
Examples
Basic Typed Signature Field
Signature
Full name
Dancing Script
Great Vibes
Sacramento
Caveat
Type your full name
Prefilled Typed Signature Field
Signature
Full name
Dancing Script
Great Vibes
Sacramento
Caveat
Jane Doe
Typed Signature Field With Error
Signature
A signature is required.
Full name
Dancing Script
Great Vibes
Sacramento
Caveat
Type your full name
Your signature will be printed on all notes going forward.