Switch

A toggle for binary on/off states.

Install

npx @beaket/ui add switch

Import

import { Switch } from "@/components/ui/switch"

Examples

States

export const AllStates: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-3">
        <Switch defaultChecked={false} aria-label="Unchecked switch" />
        <span className="text-sm">Unchecked</span>
      </div>
      <div className="flex items-center gap-3">
        <Switch defaultChecked={true} aria-label="Checked switch" />
        <span className="text-sm">Checked</span>
      </div>
      <div className="flex items-center gap-3">
        <Switch disabled aria-label="Disabled unchecked switch" />
        <span className="text-sm">Disabled (unchecked)</span>
      </div>
      <div className="flex items-center gap-3">
        <Switch disabled defaultChecked={true} aria-label="Disabled checked switch" />
        <span className="text-sm">Disabled (checked)</span>
      </div>
    </div>
  ),
};

Sizes

export const Sizes: Story = {
  render: () => (
    <div className="flex items-center gap-4">
      <div className="flex flex-col items-center gap-2">
        <Switch size="sm" defaultChecked aria-label="Small switch" />
        <span className="text-steel text-xs">Small</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Switch size="md" defaultChecked aria-label="Medium switch" />
        <span className="text-steel text-xs">Medium</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Switch size="lg" defaultChecked aria-label="Large switch" />
        <span className="text-steel text-xs">Large</span>
      </div>
    </div>
  ),
};

Props

Name	Type	Default	Description
size	undefined \| sm \| md \| lg	—	sm \| md \| lg. Size of the switch
checked	boolean \| undefined	—	Whether the switch is checked (controlled mode)
defaultChecked	boolean \| undefined	—	Default checked state (uncontrolled mode)
onCheckedChange	((checked: boolean) => void) \| undefined	—	Callback fired when the checked state changes
disabled	boolean \| undefined	—	Whether the switch is disabled
required	boolean \| undefined	—	Whether the switch is required in a form
name	string \| undefined	—	Name attribute for form submission
value	string \| undefined	—	Value attribute for form submission when checked