Signature
A signature capture field with draw and type modes, customizable pen settings, and canvas appearance.
The Signature field provides a canvas where users can draw or type their signature. It captures the signature as an image and supports customization of the pen color, stroke width, canvas background, and available input modes.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | -- | Label text displayed above the field |
| required | boolean | false | Whether a signature must be provided before submission |
| width | LayoutWidth | "full" | Horizontal space the field occupies |
| help | string | -- | Help text displayed below the field |
| key | string | -- | Variable name for referencing the field value |
| height | number | -- | Canvas height in pixels |
| penColor | string | -- | Stroke color for drawing mode (any CSS color value) |
| backgroundColor | string | -- | Canvas background color |
| minStrokeWidth | number | -- | Minimum stroke width for the tapered pen effect |
| maxStrokeWidth | number | -- | Maximum stroke width for the tapered pen effect |
| allowedModes | ("draw" or "type")[] | both | Which input modes are available to the user |
| typedFontFamily | string | -- | Font family used for the typed signature mode |
Input Modes
The Signature field supports two input modes, controlled by the allowedModes property:
- draw -- The user draws their signature on a canvas using a mouse, trackpad, or touch input. The pen produces a tapered stroke that varies between
minStrokeWidthandmaxStrokeWidthbased on drawing speed. - type -- The user types their name and it is rendered in a signature-style font specified by
typedFontFamily.
By default, both modes are available and the user can switch between them. You can restrict to a single mode by setting allowedModes to ["draw"] or ["type"].
Example Usage
A contract agreement form with a drawing-only signature pad:
{
"type": "signature",
"label": "Your Signature",
"required": true,
"height": 200,
"penColor": "#000000",
"backgroundColor": "#ffffff",
"minStrokeWidth": 0.5,
"maxStrokeWidth": 2.5,
"allowedModes": ["draw"]
}