# Switch

A strict, minimalist toggle switch.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



A toggle switch for ON/OFF binary settings. Built with Monolith's strict rules, featuring a `rounded-none` track but a `rounded-full` (9999px) knob as explicitly permitted by the design spec.



<ComponentPreview name="switch-demo">
  <div className="flex items-center space-x-2 py-8">
    <Switch id="airplane-mode" />

    <label htmlFor="airplane-mode" className="text-sm font-medium leading-none pt-0.5">
      Airplane Mode
    </label>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/switch.json"
```

## Usage [#usage]

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

export function SwitchDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <label htmlFor="airplane-mode" className="text-sm font-medium leading-none">
        Airplane Mode
      </label>
    </div>
  )
}
```

## Examples [#examples]

### Disabled [#disabled]

When the switch is disabled, it receives lowered opacity (`opacity-50`) and prevents pointer events.

<ComponentPreview name="switch-disabled">
  <div className="flex items-center space-x-2 py-8">
    <Switch id="airplane-mode-disabled" />

    <label htmlFor="airplane-mode-disabled" className="text-sm font-medium leading-none opacity-50 pt-0.5">
      Airplane Mode (Disabled)
    </label>
  </div>
</ComponentPreview>

### With Text [#with-text]

A standard use-case where the switch is paired with a label and a description.

<ComponentPreview name="switch-with-text">
  <div className="flex items-start space-x-4 py-8">
    <Switch id="notifications" />

    <div className="grid gap-1.5 leading-none pt-0.5">
      <label htmlFor="notifications" className="text-sm font-medium leading-none">
        Push Notifications
      </label>

      <div className="text-sm text-muted-foreground mt-1.5">
        Receive notifications when someone mentions you.
      </div>
    </div>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Switch` component uses Radix UI Primitives. For a complete API reference, please refer to the [Radix UI Switch Documentation](https://www.radix-ui.com/docs/primitives/components/switch).

| Prop              | Type       | Default | Description                                                                                         |
| ----------------- | ---------- | ------- | --------------------------------------------------------------------------------------------------- |
| `checked`         | `boolean`  | -       | The controlled checked state of the switch.                                                         |
| `defaultChecked`  | `boolean`  | `false` | The checked state when initially rendered.                                                          |
| `onCheckedChange` | `function` | -       | Event handler called when the checked state changes.                                                |
| `disabled`        | `boolean`  | `false` | When `true`, prevents the user from interacting with the switch.                                    |
| `required`        | `boolean`  | `false` | When `true`, indicates that the user must check the switch before the owning form can be submitted. |