Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

Toggle

A two-state button that can be either on or off.

Styling solution Source file Download runnable sandbox

import { Toggle } from "@radix-solid/primitives";
import { FontItalicIcon } from "@radix-solid/icons";
import styles from "./styles.module.css";
const ToggleDemo = () => <Toggle.Root class={styles.Toggle} aria-label="Toggle italic">
		<FontItalicIcon />
	</Toggle.Root>;
export default ToggleDemo;

Features

Full keyboard navigation.
Can be controlled or uncontrolled.

Anatomy

Import the component.

import { Toggle } from "@radix-solid/primitives";
export default () => <Toggle.Root />;

API Reference

Root

The toggle.

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultPressed`	`boolean`	—
`pressed`	`boolean`	—
`onPressedChange`	`function`	—
`disabled`	`boolean`	—

Data attribute	Values
`[data-state]`	`"on" \| "off"`
`[data-disabled]`	Present when disabled

Accessibility

Keyboard Interactions

Key	Description
`Space`	Activates/deactivates the toggle.
`Enter`	Activates/deactivates the toggle.