Switch

A toggle for binary on/off states.

$ npx @beaket/ui add switch

Source

import { useState } from "react";

import { Label } from "@/components/ui/label";

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

export default () => (
  <div className="flex items-center gap-3">
    <Switch defaultChecked={false} aria-label="Off" />
    <Switch defaultChecked={true} aria-label="On" />
  </div>
);

Examples

All States

Source

import { useState } from "react";

import { Label } from "@/components/ui/label";

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

const args = {};

const 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 className="flex items-center gap-3">
      <Switch aria-invalid aria-label="Invalid switch" />
      <span className="text-sm">Invalid</span>
    </div>
  </div>
);

export default function Example() {
  return render();
}

Sizes

Small

Medium

Large

Source

import { useState } from "react";

import { Label } from "@/components/ui/label";

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

const args = {};

const 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-fg-muted 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-fg-muted 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-fg-muted text-xs">Large</span>
    </div>
  </div>
);

export default function Example() {
  return render();
}

Props

Name	Type	Default	Description
size	undefined \| sm \| md \| lg	sm	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