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.

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.

Disable a switch

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

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.

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