# Switch

Switch is a neobrutalist React component from Cruise UI. An on/off toggle for settings that take effect straight away.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/switch
```

Import: `import { CruiseSwitch } from "@/components/cruise/switch";`

## When to use

Settings that apply immediately: notifications, dark mode.

## When not to

Inside a form that is submitted later (use a Checkbox).

## Example (React)

```tsx
import { CruiseSwitch } from "@/components/cruise/switch";

export default function SwitchExample() {
  return (
    <div className="flex flex-col">
      <CruiseSwitch label="Order updates by SMS" defaultChecked showState />
      <CruiseSwitch label="Email newsletter" showState />
      <CruiseSwitch label="Two-step sign-in (coming soon)" disabled />
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<button type="button" class="switch" role="switch" aria-checked="false">
  <span class="switch-track" aria-hidden="true"><span class="switch-knob"></span></span>
  <span>Order updates by SMS</span>
  <span class="switch-state" aria-hidden="true">Off</span>
</button>
```

## Props: CruiseSwitch

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `ReactNode` | — | — |
| `checked?` | `boolean` | — | — |
| `defaultChecked?` | `boolean` | `false` | — |
| `onCheckedChange?` | `((checked: boolean) => void)` | — | — |
| `showState?` | `boolean` | `false` | Show "On" / "Off" after the label (state not by colour alone). |
| `disabled?` | `boolean` | — | — |
| `className?` | `string` | — | — |

## Accessibility

- <button role="switch"> with aria-checked; Space and Enter toggle it.
- The knob position changes too, so the state never relies on colour alone.