Patterns
Documents and signatures
Patterns for previewing documents, uploading files and capturing signatures accessibly on web, iOS and Android.
Binds products create, preview and sign documents and email signatures. These patterns keep that work clear and trustworthy.
Previewing
- Show a faithful preview beside the form that produces it on large screens, and behind a Preview action on phones.
- User-supplied HTML is never rendered directly. Sanitise it or render it in a sandboxed frame.
- Offer zoom and a plain-text alternative for long documents.
Uploading
- State accepted types and size limits before upload, validate on the device, and list each file with its own progress and remove action.
- On mobile, use the system pickers for photos and files rather than a custom browser.
Capturing a signature
- Offer more than one way to sign: draw, type a name, or upload an image. Drawing alone excludes people who cannot use a pointer precisely.
- Provide Clear and Undo, and confirm before a signature is applied.
- Record intent in text (“By signing, you agree…”) next to the action.
Components
| Part | Web | iOS and iPadOS | Android |
|---|---|---|---|
| Upload | FileUpload | StanceAttachmentPicker | Attachment picker helpers |
| Preview | Card, ScrollArea, Dialog | StanceDocumentPreview (Quick Look) | System viewer intents |
| Signature | SignaturePad with typed and upload alternatives | StanceSignatureCanvas | StanceSignatureCanvas |
| Progress | Stepper, Progress | StanceStepper | StanceStepper |
Stance provides the interface parts. Legal validity, audit trails and storage belong to the product, not the design system.