Radix homepage
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.

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.

PropTypeDefault
asChildbooleanfalse
defaultCheckedbooleanNo default value
checkedbooleanNo default value
onCheckedChangefunctionNo default value
disabledbooleanNo default value
requiredbooleanNo default value
namestringNo default value
valuestringon
Data AttributeValues
[data-state]"checked" | "unchecked"
[data-disabled]Present when disabled

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

PropTypeDefault
asChildbooleanfalse
Data AttributeValues
[data-state]"checked" | "unchecked"
[data-disabled]Present when disabled

Adheres to the switch role requirements.

KeyDescription
SpaceToggles the component's state.
EnterToggles the component's state.