Intro
The signature form cell is an entry point for users to launch the signature capture component.
Signature form cell on mobile (left) and on tablet (right)
Usage
Do
Use the signature capture form cell when user consent is required.
Don't
Don’t use the signature capture form cell for insignificant or non-essential tasks.
- Use a concise header to communicate the purpose and importance of the signature requirement.
- Use an asterisk (*) next to the header to indicate that the signature is required. For broader or less experienced audiences, include a note such as “Fields marked with an asterisk are required” at the top or bottom of the page, and repeat this consistently across the app.
Anatomy
A. Header
The header introduces the signature form cell and may have an asterisk next to it to indicate that the signature is required.
B. Text Label
The text label describes what the signature is for.
C. Helper Text
The helper text provides additional information about the form cell.
D. “Add Signature” Button
The “Add Signature” button launches the dialog for the signature capture when tapped.
Anatomy of the signature form cell
Behavior and Interaction
The signature icon is the touch target for the form cell. When it is tapped, it navigates users to the signature capture.
Activating the signature form cell
Adaptive Design
The full width of the signature form cell adapts to different screen sizes.
Signature form cell on mobile (top) and on tablet (bottom)
Resources
Development: SignatureCaptureFormCell
Related Components/Patterns: Signature Capture, Button, Signature Capture Inline