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.

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

Usage

Import DAFF_SWITCH_COMPONENTS into your 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 {}

Anatomy

A switch consists of a toggle control with a label projected as content:

<daff-switch>Wi-Fi</daff-switch>

• <daff-switch>: The switch control. The label is provided as projected content and is automatically associated with the toggle.

Features

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>

Disabled 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-form-field>
  <daff-form-label>Label position</daff-form-label>
  <daff-select [options]="options" [formControl]="labelPositionControl">
    <ng-template daffSelectOption let-option="option">
      {{ option.label }}
    </ng-template>
  </daff-select>
</daff-form-field>

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

Accessibility

Switch follows the ARIA Switch design pattern.

Built-in behavior

• 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