Switch

A control that allows the user to toggle between checked and not checked.

import * as React from "react";
import { Switch } from "radix-ui";
import "./styles.css";

const SwitchDemo = () => (
	<form>
		<div style={{ display: "flex", alignItems: "center" }}>
			<label
				id="airplane-mode-label"
				htmlFor="airplane-mode"
				className="Label"
				style={{ paddingRight: 15 }}
			>
				Airplane mode
			</label>
			<Switch.Root
				id="airplane-mode"
				aria-labelledby="airplane-mode-label"
				className="SwitchRoot"
			>
				<Switch.Thumb className="SwitchThumb" />
			</Switch.Root>
		</div>
	</form>
);

export default SwitchDemo;
Expand code

Anatomy

Import all parts and piece them together.

import { Switch } from "radix-ui";

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.

Thumb

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

Examples

Decoupling the hidden input

By default, Switch.Root renders a visually hidden input for form submission. To recompose, move, or exclude that input, you can build the switch from its lower-level parts instead.

Important: These parts are unstable and prefixed with unstable_, so their API may change in a future release.

• Switch.unstable_Provider provides the switch state and accepts the form-related props (name, value, checked, defaultChecked, required, disabled, onCheckedChange).
• Switch.unstable_Trigger is the interactive button that wraps Switch.Thumb.
• Switch.unstable_BubbleInput is the visually hidden input that Switch.Root renders by default. Omit it when you don't need form submission.

import { Switch } from "radix-ui";

export default () => (
	<Switch.unstable_Provider name="airplane-mode">
		<Switch.unstable_Trigger>
			<Switch.Thumb />
		</Switch.unstable_Trigger>
		{/* The hidden input can be omitted if you don't need form submission */}
		<Switch.unstable_BubbleInput />
	</Switch.unstable_Provider>
);

Accessibility

Adheres to the switch role requirements.

Keyboard Interactions