> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Switch

> Toggle input for true/false values in forms.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/switch-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=5f8378b6b0261252ac650bea1152c7bd" alt="Switch component preview (light)" width="240" data-path="images/ui/switch-light.png" />
</Frame>

* **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

```tsx sabo/src/components/ui/switch.tsx theme={null}
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

<ParamField path="defaultChecked" type="boolean">
  Initial on/off state. Use controlled <code>checked</code> for form state libraries.
</ParamField>

<ParamField path="className" type="string">
  Customize size or colors via Tailwind (e.g., <code>h-5 w-10</code>).
</ParamField>

<Note>
  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](https://www.radix-ui.com/primitives/docs/components/switch)
</Note>

## Styling tip

* Use <code>data-\[state=checked]:...</code> 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.