1. Home
2. Components
3. Switch

# Switch

A control that allows the user to toggle between checked and not checked.

[Docs](https://www.radix-ui.com/primitives/docs/components/switch)[API Reference](https://www.radix-ui.com/primitives/docs/components/switch#api-reference)[shadcn/ui](https://ui.shadcn.com/docs/components/switch)## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| ...Radix props | ComponentProps<typeof SwitchPrimitive.Root> | - | All Radix switch root props |

### Examples

```jsx
<Switch id="notifications" defaultChecked />
```

## Usage

Switch Switch checked Switch disabled Switch disabled checked ```jsx
<div className="flex flex-col gap-6">
  <div className="flex items-center gap-2">
    <Switch id="Switch" />
    <label htmlFor="Switch">Switch</label>
  </div>
  <div className="flex items-center gap-2">
    <Switch id="Switch On" defaultChecked />
    <label htmlFor="Switch On">Switch checked</label>
  </div>
  <div className="flex items-center gap-2">
    <Switch id="Switch disabled" disabled />
    <label htmlFor="Switch disabled">Switch disabled</label>
  </div>
  <div className="flex items-center gap-2">
    <Switch id="Switch disabled checked" defaultChecked disabled />
    <label htmlFor="Switch disabled checked">Switch disabled checked</label>
  </div>
</div>
```