Switch - Sabo

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.

SliderRange input for selecting numeric values.

​When to use

​Usage

​Key props

​Styling tip

​Accessibility

When to use

Usage

Key props

Styling tip

Accessibility