The TOGGLE_BUTTON component provides a group of toggle buttons where users can select exactly one option from multiple choices.
🛝 Use the Dynamic Form Playground to see the Toggle Button component in action and try out different configurations
| Property | Type | Required | Description |
|---|---|---|---|
type | 'TOGGLE_BUTTON' | Yes | Specifies the field type as TOGGLE_BUTTON. |
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 | No | Label text displayed above the options. Supports translation and string interpolation. |
value | string | number | boolean | No | The field's initial value. If set, the corresponding option will be pre-selected. |
note | string | No | Informational note displayed when there are no errors. |
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. 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). |
spacing | string | No | Margin spacing before the next field: 'NONE' (0px), 'XS' (8px), 'S' (16px), 'M' (24px), 'L' (32px), 'XL' (40px), 'XXL' (48px). |
Note: This component does not support the hint property, unlike most other interactive components. The columnSpan property is also not supported, meaning the component always spans the full width of the form (12 columns).
| Property | Type | Required | Description |
|---|---|---|---|
options | DfOptions[] | string | Yes | The options property can take one of two forms:1. It can be a hardcoded array of objects for direct display in a toggle button. Each object must have a label to display and a corresponding value.2. A string that represents an expression. This expression is used by an option provider service to dynamically fetch the toggle button options. See also DfOptions |
size | string | No | To set the size of the toggle button ('small' or 'large'). The default size is 'large'. In Expert journeys only 'small' size is allowed. |
| Property | Type | Required | Description |
|---|---|---|---|
label | string | Yes | The label to display for the list |
value | string | number | boolean | Yes | The value of the option |
testId | string | No | The test id of the option used for automated tools, like cypress to find the componentand made independent of other config changes. If implemented, the value should be the following data-testid=VALUE_HEREwith the testid in lowercase. |
{
"id": "insuranceType",
"type": "TOGGLE_BUTTON",
"label": "Select Insurance Type",
"options": [
{
"label": "Life Insurance",
"value": "life"
},
{
"label": "Health Insurance",
"value": "health"
},
{
"label": "Vehicle Insurance",
"value": "vehicle"
}
],
"validators": [
{
"type": "REQUIRED"
}
]
}{
"id": "insurancePlan",
"type": "TOGGLE_BUTTON",
"label": "Select Insurance Plan",
"size": "small",
"options": "$.availableInsurancePlans",
"validators": [
{
"type": "REQUIRED",
"errorMessage": "Please select an insurance plan"
}
]
}For complete API documentation, see DfToggleButtonConfig.
For Aquila component documentation and design guidelines, see Toggle Button - Aquila Design System.