42 lines
1.3 KiB
Markdown
42 lines
1.3 KiB
Markdown
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>
|
|
``` |