# Switch

> A toggle whose thumb stretches as you press it.

Component · Free · https://lodeui.com/components/switch

## When to use

- Settings that take effect immediately, like enabling notifications.

## When not to use

- Choices that apply on Save: use a checkbox.
- More than two states: use a segmented control or select.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/switch.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Switch } from "@/components/ui/switch";

export function DigestSetting() {
  const [on, setOn] = React.useState(true);
  return (
    <label className="flex items-center justify-between gap-4">
      <span>Weekly digest</span>
      <Switch checked={on} onCheckedChange={setOn} aria-label="Weekly digest" />
    </label>
  );
}
```

## API reference

### Switch

A toggle button whose thumb stretches while pressed.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| checked / defaultChecked | `boolean` | – | Controlled or uncontrolled state. |
| onCheckedChange | `(checked: boolean) => void` | – | Called on toggle. |
| size | `"sm" \| "md"` | `"md"` | 36×20 or 46×26 px. |
| disabled | `boolean` | – | Dims and blocks interaction. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Space / Enter | Toggle |

## Accessibility

- Native button with role="switch" and aria-checked.
- Pair with visible text or an aria-label.

## Motion

- The thumb widens 6px toward its destination while pressed, then springs across (stiffness 600).

## Responsive behavior

- Fixed size; aligns to the baseline of a row of text.

## Performance

- One animated element.

## Notes for AI

- Don't use for form fields that submit later; use Checkbox.

## Related

- [Checkbox](https://lodeui.com/components/checkbox) — A checkbox whose tick draws itself, with an indeterminate state.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.
- [Radio group](https://lodeui.com/components/radio-group) — Radios as a list or as choice cards, with arrow-key navigation.