# Switch

> An on/off setting that takes effect immediately, with a loading state while it saves.

Category: Forms. Docs page: https://rime.mjsons.net/components/switch

## Installation

```bash
npx shadcn@latest add KezLahd/rime/switch
```

Switch is role="switch" on a button. Use it for settings that apply at once; use Checkbox inside forms that are submitted.

## Usage

```tsx
import { Switch } from "@/components/ui";

<Switch label="Email me when an invoice is paid" checked={on} onChange={setOn} />
```

## Props: Switch

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `checked` (required) | `boolean` |  |  |
| `onChange` (required) | `(checked: boolean) => void` |  |  |
| `label` (required) | `ReactNode` |  |  |
| `description` | `ReactNode` |  |  |
| `disabled` | `boolean` |  |  |
| `loading` | `boolean` |  | The change is saving. Blocks input and shows a spinner in the thumb. |
| `id` | `string` |  |  |
| `labelPosition` | `"start" \| "end"` | `"end"` | Label on the left, switch pushed right: for settings rows. |
| `className` | `string` |  |  |

## Examples

### States

```tsx
<Switch label="Saving" checked loading onChange={…} />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--r-flat` | `5px` |

System tokens it reads: `--brand-gradient`, `--dur`, `--ease`, `--focus-ring`, `--glow-md`, `--glow-sm`, `--ink-body`, `--ink-disabled`, `--ink-muted`, `--r-sm`, `--rgb-brand-deep`, `--rgb-contact`, `--shadow-specular`, `--surface-solid`, `--text-body`, `--text-caption`.

## Accessibility

- aria-checked reflects state; loading sets aria-busy and blocks toggling.

## Do

- Say what is on, not what pressing does: "Email notifications".

## Don't

- Don't use a Switch inside a form that has a submit button.