Skip to main content
Switch component preview (light)
  • Location: sabo/src/components/ui/switch.tsx

​
When to use

  • Boolean form fields (notifications on/off, enable feature).
  • Prefer Switch over Checkbox when the effect is immediate and binary.

​
Usage

sabo/src/components/ui/switch.tsx
import { Switch } from "@/components/ui/switch";

export function Example() {
  return (
    <label className="flex items-center gap-3">
      <Switch defaultChecked aria-label="Email alerts" />
      <span>Email alerts</span>
    </label>
  );
}

​
Key props

​
defaultChecked
boolean
Initial on/off state. Use controlled checked for form state libraries.
​
className
string
Customize size or colors via Tailwind (e.g., h-5 w-10).
This component forwards all props from Radix Switch primitives (Root/Thumb). Above are commonly used props. For the full API, see Radix docs: https://www.radix-ui.com/primitives/docs/components/switch

​
Styling tip

  • Use data-[state=checked]:… selectors to style the on state.
  • Wrap with a label for clear affordance and click target.

​
Accessibility

  • Provide a visible label; keep focus outlines and contrast strong.