Switch

<Description> A control that allows the user to toggle between checked and not checked. </Description> <HeroContainer> <SwitchDemo /> </HeroContainer> <HeroCodeBlock folder="Switch" />

Installation

Install the component from your command line.

bash

npm install @radix-ui/react-switch

Anatomy

Import all parts and piece them together.

jsx

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.

<PropsTable data={[ { name: "asChild", required: false, type: "boolean", default: "false", description: ( <> Change the default rendered element for the one passed as a child, merging their props and behavior.

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "defaultChecked",
		type: "boolean",
		description:
			"The state of the switch when it is initially rendered. Use when you do not need to control its state.",
	},
	{
		name: "checked",
		type: "boolean",
		description: (
			<span>
				The controlled state of the switch. Must be used in conjunction with{" "}
				<Code>onCheckedChange</Code>.
			</span>
		),
	},
	{
		name: "onCheckedChange",
		type: "(checked: boolean) => void",
		typeSimple: "function",
		description: "Event handler called when the state of the switch changes.",
	},
	{
		name: "disabled",
		type: "boolean",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				switch.
			</span>
		),
	},
	{
		name: "required",
		type: "boolean",
		description: (
			<span>
				When <Code>true</Code>, indicates that the user must check the switch
				before the owning form can be submitted.
			</span>
		),
	},
	{
		name: "name",
		type: "string",
		description:
			"The name of the switch. Submitted with its owning form as part of a name/value pair.",
	},
	{
		name: "value",
		type: "string",
		default: "on",
		description: (
			<span>
				The value given as data when submitted with a <Code>name</Code>.
			</span>
		),
	},
]}

Thumb

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

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

Accessibility

Adheres to the switch role requirements.

Keyboard Interactions