Components

Switch

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;

Features

    Full keyboard navigation.

    Can be controlled or uncontrolled.

Installation

Install the component from your command line.

npm install @radix-ui/react-switch

Anatomy

Import all parts and piece them together.

import * as Switch from '@radix-ui/react-switch';
export default () => (
<Switch.Root>
<Switch.Thumb />
</Switch.Root>
);

API Reference

Root

Contains all the parts of a switch. An input will also render when used within a form to ensure events propagate correctly.

PropTypeDefault
asChild
boolean
false
defaultChecked
boolean
No default value
checked
boolean
No default value
onCheckedChange
function
No default value
disabled
boolean
No default value
required
boolean
No default value
name
string
No default value
value
string
on
Data attributeValues
[data-state]"checked" | "unchecked"
[data-disabled]

Present when disabled

Thumb

The thumb that is used to visually indicate whether the switch is on or off.

PropTypeDefault
asChild
boolean
false
Data attributeValues
[data-state]"checked" | "unchecked"
[data-disabled]

Present when disabled

Accessibility

Adheres to the switch role requirements.

Keyboard Interactions

KeyDescription
Space
Toggles the component's state.
Enter
Toggles the component's state.
PreviousSlider
NextTabs