Switch

Overview

Switches provide a way to toggle between two states with a visual indicator of the current state. A label can be positioned on the left, right, top, or bottom of the switch. The switch can be set to a disabled state, display a loading indicator, or show a custom error message.

<daff-switch>Reminder</daff-switch>

Usage

Within a standalone component

To use switch, import DAFF_SWITCH_COMPONENTS directly into your custom component:

import { DAFF_SWITCH_COMPONENTS } from '@daffodil/design/switch';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_SWITCH_COMPONENTS,
  ],
})
export class CustomComponent {}

Sizes

A small switch variant is available for dense layouts. Use the size="sm" property to render a more compact version of a switch.

<daff-switch>Default</daff-switch>
<daff-switch size="sm">Small</daff-switch>

Disable a switch

Use the disabled property on switch to make it non-interactive.

<daff-switch [disabled]="true">Disabled</daff-switch>

Label positions

Use the labelPosition property to control the visual relationship between the switch and its label. By default, labels appear to the left of the switch control.

<daff-switch [labelPosition]="labelPositionControl.value" [formControl]="labelSwitchExample" ngDefaultControl>Label</daff-switch>

<select [formControl]="labelPositionControl">
  @for (option of options; track option) {
    <option [value]="option.value">{{ option.label }}</option>
  }
</select>

Accessibility

Switch follows the ARIA Switch design pattern.

• The switch control is implemented as a <button> element with a role of switch.
• aria-checked is used to indicate the switch's on/off state.
• Links the switch to its label id using aria-labelledby.

Keyboard interactions