A control that allows the user to toggle between checked and not checked.
import React from 'react';
import * as Switch from '@radix-ui/react-switch';
import './styles.css';
const SwitchDemo = () => (
<form>
<div style={{ display: 'flex', alignItems: 'center' }}>
<label className="Label" htmlFor="airplane-mode" style={{ paddingRight: 15 }}>
Airplane mode
</label>
<Switch.Root className="SwitchRoot" id="airplane-mode">
<Switch.Thumb className="SwitchThumb" />
</Switch.Root>
</div>
</form>
);
export default SwitchDemo;
Install the component from your command line.
npm install @radix-ui/react-switch
Import all parts and piece them together.
import * as Switch from '@radix-ui/react-switch';
export default () => (
<Switch.Root>
<Switch.Thumb />
</Switch.Root>
);
Contains all the parts of a switch. An input will also render when used within a form to ensure events propagate correctly.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
defaultChecked | boolean | |
checked | boolean | |
onCheckedChange | function | |
disabled | boolean | |
required | boolean | |
name | string | |
value | string | on |
| Data Attribute | Values |
|---|---|
[data-state] | "checked" | "unchecked" |
[data-disabled] | Present when disabled |
The thumb that is used to visually indicate whether the switch is on or off.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
| Data Attribute | Values |
|---|---|
[data-state] | "checked" | "unchecked" |
[data-disabled] | Present when disabled |
Adheres to the switch role requirements.
| Key | Description |
|---|---|
| Space | Toggles the component's state. |
| Enter | Toggles the component's state. |