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

Toggle Group

A set of two-state buttons that can be toggled on or off.

Styling solution Source file Download runnable sandbox

import { ToggleGroup } from "@radix-solid/primitives";
import { TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon } from "@radix-solid/icons";
import styles from "./styles.module.css";
const ToggleGroupDemo = () => <ToggleGroup.Root class={styles.Group} type="single" defaultValue="center" aria-label="Text alignment">
		<ToggleGroup.Item class={styles.Item} value="left" aria-label="Left aligned">
			<TextAlignLeftIcon />
		</ToggleGroup.Item>
		<ToggleGroup.Item class={styles.Item} value="center" aria-label="Center aligned">
			<TextAlignCenterIcon />
		</ToggleGroup.Item>
		<ToggleGroup.Item class={styles.Item} value="right" aria-label="Right aligned">
			<TextAlignRightIcon />
		</ToggleGroup.Item>
	</ToggleGroup.Root>;
export default ToggleGroupDemo;

Features

Full keyboard navigation.
Supports horizontal/vertical orientation.
Support single and multiple pressed buttons.
Can be controlled or uncontrolled.

Anatomy

Import the component.

import { ToggleGroup } from "@radix-solid/primitives";
export default () => <ToggleGroup.Root type="single">
		<ToggleGroup.Item value="bold" aria-label="Bold" />
	</ToggleGroup.Root>;

API Reference

Root

Contains all the parts of a toggle group.

Prop	Type	Default
`asChild`	`boolean`	`false`
`type*`	`enum`	—
`value`	`string`	—
`defaultValue`	`string`	—
`onValueChange`	`function`	—
`value`	`string[]`	`[]`
`defaultValue`	`string[]`	`[]`
`onValueChange`	`function`	—
`disabled`	`boolean`	`false`
`rovingFocus`	`boolean`	`true`
`orientation`	`enum`	`undefined`
`dir`	`enum`	—
`loop`	`boolean`	`true`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

Item

An item in the group.

Prop	Type	Default
`asChild`	`boolean`	`false`
`value*`	`string`	—
`disabled`	`boolean`	—

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

Examples

Ensuring there is always a value

You can control the component to ensure a value.

import { createSignal } from "solid-js";
import { ToggleGroup } from "@radix-solid/primitives";
export default () => {
  const [value, setValue] = createSignal("left");
  return <ToggleGroup.Root type="single" value={value()} onValueChange={value => {
    if (value) setValue(value);
  }}>
			<ToggleGroup.Item value="left">
				<TextAlignLeftIcon />
			</ToggleGroup.Item>
			<ToggleGroup.Item value="center">
				<TextAlignCenterIcon />
			</ToggleGroup.Item>
			<ToggleGroup.Item value="right">
				<TextAlignRightIcon />
			</ToggleGroup.Item>
		</ToggleGroup.Root>;
};

Accessibility

Uses roving tabindex to manage focus movement among items.

Keyboard Interactions

Key	Description
`Tab`	Moves focus to either the pressed item or the first item in the group.
`Space`	Activates/deactivates the item.
`Enter`	Activates/deactivates the item.
`ArrowDown`	Moves focus to the next item in the group.
`ArrowRight`	Moves focus to the next item in the group.
`ArrowUp`	Moves focus to the previous item in the group.
`ArrowLeft`	Moves focus to the previous item in the group.
`Home`	Moves focus to the first item.
`End`	Moves focus to the last item.