Delphi Design

A switch component for toggling states.

Default

Off

Disabled

With Label

Notifications

Enable notifications

Dark Mode

Dark mode

Usage

import { Switch, Label } from "@delphi/ui";

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Switch id="airplane" />
      <Label htmlFor="airplane">Airplane Mode</Label>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`checked`	`boolean`	-	Controlled checked state
`defaultChecked`	`boolean`	`false`	Default checked state
`onCheckedChange`	`(checked: boolean) => void`	-	Called when state changes
`disabled`	`boolean`	`false`	Disables the switch
`id`	`string`	-	HTML id for label association

Use switches for instant-apply settings (no save button needed)

Always pair with a label that clearly describes the setting

Position the switch consistently — typically to the right of the label

Provide immediate visual feedback when the state changes

Use role="switch" and aria-checked for accessibility

Use switches for actions that require confirmation — use a button instead

Use switches for multi-state options — use radio buttons or select

Change unrelated settings when a switch is toggled

Use negative labels like "Disable notifications"