The SWITCHER component provides a toggle switch for binary on/off choices.
🛝 Use the Dynamic Form Playground to see the Switcher component in action and try out different configurations
| Property | Type | Required | Description |
|---|---|---|---|
type | 'SWITCHER' | Yes | Specifies the field type as SWITCHER. |
id | string | Yes | Unique identifier for the field. The field's value is stored in the form state under this key. |
renderName | string | No | Optional name added as data-render-name attribute to locate the rendered element in the DOM. |
label | string | Yes | Label text displayed next to the switcher. Supports translation and string interpolation. |
value | boolean | No | Initial state of the switcher (true = on, false = off). Set via standard form value mechanism. |
note | string | No | Informational note displayed when there are no errors. |
hint | string | No | Helper text displayed below the field. |
infoIcon | DfInfoIconConfig | No | Info icon with popover. Object with popoverText (string, required) and popoverDirection ('top', 'bottom', 'left', 'right'). |
validators | array | No | Validation rules for the field. Common type: REQUIRED_TRUE. Each validator has type and optional errorMessage. |
testId | string | No | Test identifier for automated testing. Set as data-testid attribute. |
acl | array | No | Access control rules for field visibility/editability. Each rule has state ('hidden', 'readonly', 'disabled', 'visible', 'editable') and optional condition (Filtrex expression). |
columnSpan | number | No | Number of columns to span (1-12) in CUSTOM_COLUMN layout. Default: 12 (full width). See Overriding the number of grid columns when using --df-custom-columns. |
spacing | string | No | Margin spacing before next field: 'NONE' (0px), 'XS' (8px), 'S' (16px), 'M' (24px), 'L' (32px), 'XL' (40px), 'XXL' (48px). |
| Property | Type | Required | Description |
|---|---|---|---|
labelPosition | string | No | Sets the label position to be on the left or right. Default is left. |
size | string | No | Sets the switcher size to be small or large. Default is small. |
{
"id": "marketingConsent",
"type": "SWITCHER",
"label": "I want to receive marketing communications"
}Important: For consent scenarios, use REQUIRED_TRUE validator to ensure the switcher is enabled/turned on.
{
"id": "dataProcessingConsent",
"type": "SWITCHER",
"label": "I consent to data processing",
"validators": [
{
"type": "REQUIRED_TRUE",
"errorMessage": "Consent is required to proceed"
}
]
}{
"id": "autoRenewal",
"type": "SWITCHER",
"label": "Automatic policy renewal",
"size": "large",
"labelPosition": "right",
"value": true,
"hint": "Your policy will automatically renew each year"
}For complete API documentation, see DfSwitcherConfig.
For Aquila component documentation and design guidelines, see Switcher - Aquila Design System.