Toggle Button Component

1. Overview
2. Key Features
3. Configuration Properties
4. Configuration Examples
- Basic Toggle Button
- Dynamic Toggle Button with Expression
5. API Reference

1. Overview

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

2. Key Features

Single selection from multiple options
Static or dynamic option fetching
Translation and string interpolation support

3. Configuration Properties

Base Properties

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`	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 next field: `'NONE'` (0px), `'XS'` (8px), `'S'` (16px), `'M'` (24px), `'L'` (32px), `'XL'` (48px), `'XXL'` (64px).

Note: This component does not support the hint property, unlike most other interactive components.

Component Specific Properties

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.

Options Properties (DfOptions)

Property	Type	Required	Description
`label`	`string`	Yes	The label to display for the list
`value`	`any`	Yes	The value of the option
`testId`	`string`	No	The test id of the option used for automated tools, like `cypress` to find the component and made independent of other config changes. If implemented, the value should be the following `data-testid=VALUE_HERE` with the `testid` in lowercase.

4. Configuration Examples

Basic Toggle Button

{
  "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"
    }
  ]
}

Dynamic Toggle Button with Expression

{
  "id": "insurancePlan",
  "type": "TOGGLE_BUTTON",
  "label": "Select Insurance Plan",
  "size": "small",
  "options": "$.availableInsurancePlans",
  "validators": [
    {
      "type": "REQUIRED",
      "errorMessage": "Please select an insurance plan"
    }
  ]
}

5. API Reference

For complete API documentation, see DfToggleButtonConfig.

For Aquila component documentation and design guidelines, see Toggle Button - Aquila Design System.