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 a switch in a standalone component, 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 {}

Examples

Basic Switch

A basic switch can be toggled by setting the checked property to true or false. By default, this is set to false.

Disabled Switch

A switch with the disabled property will be non-interactive.

Loading Switch

A switch can display a loading state by setting loading to true. This will also disable the switch.

Switch with Error

An error message can be displayed by setting error to true and including a daff-error-message to show the message text.

Changing Label Position

The label position can be changed by setting the labelPosition property. The default position is left.

Supported positions: left | right | top | bottom

Accessibility

Switches follow the ARIA Switch design pattern.

Keyboard Interactions