Switch

A toggle control that allows users to turn an option on or off

Installation

pnpm add @wandercom/design-system-web

Usage

import { Switch } from '@wandercom/design-system-web/ui/switch';
import { Label } from '@wandercom/design-system-web/ui/label';

export function Example() {
  return (
    <div className="flex items-center gap-2.5">
      <Switch id="notifications" />
      <Label htmlFor="notifications">Enable notifications</Label>
    </div>
  );
}

Examples

Loading example...
<div className="flex flex-col gap-6">
  <div className="flex items-center gap-2.5">
    <Switch id="notifications-1" />
    <Label htmlFor="notifications-1">Default size</Label>
  </div>

  <div className="flex items-center gap-2.5">
    <Switch id="notifications-2" size="sm" />
    <Label htmlFor="notifications-2">Small size</Label>
  </div>

  <div className="flex items-center gap-2.5">
    <Switch defaultChecked id="notifications-3" />
    <Label htmlFor="notifications-3">Default checked</Label>
  </div>

  <div className="flex items-center gap-2.5">
    <Switch defaultChecked id="notifications-4" size="sm" />
    <Label htmlFor="notifications-4">Small checked</Label>
  </div>

  <div className="flex items-center gap-2.5">
    <Switch disabled id="disabled-1" />
    <Label htmlFor="disabled-1">Disabled</Label>
  </div>

  <div className="flex items-center gap-2.5">
    <Switch disabled id="disabled-2" size="sm" />
    <Label htmlFor="disabled-2">Small disabled</Label>
  </div>
</div>

Two size variants are available: default and sm. The component supports checked, unchecked, and disabled states. Pair with a Label for clear communication.

Props

size?

'default' | 'sm'
Size variant of the switch. Defaults to 'default'.

defaultChecked?

boolean
The default checked state when the component is first rendered.

checked?

boolean
The controlled checked state.

onCheckedChange?

(checked: boolean) => void
Callback fired when the checked state changes.

disabled?

boolean
Disables the switch when true.

required?

boolean
Makes the switch required in forms.

name?

string
The name of the switch for form submission.

value?

string
The value used for form submission when checked.

id?

string
ID for associating with a label element.

className?

string
Additional CSS classes to apply.

Accessibility

The Switch component is built on the Radix UI Switch primitive, which provides full WAI-ARIA compliance out of the box.

  • Renders as role="switch" with proper aria-checked state management
  • Supports keyboard interaction: Space toggles the checked state
  • Use a Label component with a matching htmlFor and id to associate a visible label with the switch
  • Focus is indicated with a visible ring for keyboard navigation
  • Disabled switches apply aria-disabled and reduce opacity to communicate their state visually
Switch