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.

Prop	Type	Default
`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 attribute	Values
`[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.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"checked" \| "unchecked"`
`[data-disabled]`	Present when disabled

Accessibility

Adheres to the switch role requirements.

Keyboard Interactions

Key	Description
`Space`	Toggles the component's state.
`Enter`	Toggles the component's state.

PreviousSlider

NextTabs

Edit this page on GitHub.

Overview

Guides

Components

Utilities