VOOZH about

URL: https://www.radix-ui.com/primitives/docs/components/switch

⇱ Switch – Radix Primitives

Components

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;

Features

  • Full keyboard navigation.

  • Can be controlled or uncontrolled.

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.

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
Toggles the component's state.
Toggles the component's state.
PreviousSlider
NextTabs