Switcher Component

1. Overview
2. Key Features
3. Configuration Properties
- Base Properties
- Component Specific Properties
4. Configuration Examples
5. API Reference

1. Overview

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

2. Key Features

Binary toggle for on/off states
Configurable label positioning (left or right)
Size variants (small or large)
Translation and string interpolation support
Form validation support
Default value support

3. Configuration Properties

Base Properties

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

Component Specific Properties

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.

4. Configuration Examples

Basic Switcher

{
  "id": "marketingConsent",
  "type": "SWITCHER",
  "label": "I want to receive marketing communications"
}

Required Switcher with Validation

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

Switcher with Custom Size and Label Position

{
  "id": "autoRenewal",
  "type": "SWITCHER",
  "label": "Automatic policy renewal",
  "size": "large",
  "labelPosition": "right",
  "value": true,
  "hint": "Your policy will automatically renew each year"
}

5. API Reference

For complete API documentation, see DfSwitcherConfig.

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