Switch

A control that allows the user to toggle between checked and not checked.

1. Import

Import the switch component from the design system.

import { Switch } from "@/design-system/components/ui/switch"

2. Props

Switch component props.

Prop	Type	Default
size	'sm' \| 'default'	'default'
checked	boolean	false
defaultChecked	boolean	false
onCheckedChange	(checked: boolean) => void	--
disabled	boolean	false
label	string \| ReactNode	--
required	boolean	false
error	string	--
className	string	--

3. Sizes

Available sizes for the Switch component.

Small Switch

Default Switch

4. Usages

Common switch patterns and configurations.

Airplane Mode

import { Switch } from "@/design-system/components/ui/switch";
import { Label } from "@/design-system/components/ui/label";

export function Example() {
  return (
    <Switch id="airplane-mode" label="Airplane Mode" />
  );
}