VOOZH about

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

⇱ Toggle Group – Radix Primitives

Components

Toggle Group

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

import * as React from "react";

import { ToggleGroup } from "radix-ui";

import {
	TextAlignLeftIcon,
	TextAlignCenterIcon,
	TextAlignRightIcon,
} from "@radix-ui/react-icons";

import "./styles.css";

const ToggleGroupDemo = () => (

	<ToggleGroup.Root
		className="ToggleGroup"
		type="single"
		defaultValue="center"
		aria-label="Text alignment"
	>

<ToggleGroup.Item
			className="ToggleGroupItem"
			value="left"
			aria-label="Left aligned"
		>

<TextAlignLeftIcon />

</ToggleGroup.Item>

<ToggleGroup.Item
			className="ToggleGroupItem"
			value="center"
			aria-label="Center aligned"
		>

<TextAlignCenterIcon />

</ToggleGroup.Item>

<ToggleGroup.Item
			className="ToggleGroupItem"
			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-ui";

export default () => (

	<ToggleGroup.Root>

<ToggleGroup.Item />

</ToggleGroup.Root>

);

API Reference

Root

Contains all the parts of a toggle group.

PropTypeDefault
asChild
boolean
false
type*
enum
No default value
value
string
No default value
defaultValue
string
No default value
onValueChange
function
No default value
value
string[]
[]
defaultValue
string[]
[]
onValueChange
function
No default value
disabled
boolean
false
rovingFocus
boolean
true
orientation
enum
undefined
dir
enum
No default value
loop
boolean
true
Data attributeValues
[data-orientation]"vertical" | "horizontal"

Item

An item in the group.

PropTypeDefault
asChild
boolean
false
value*
string
No default value
disabled
boolean
No default value
Data attributeValues
[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 * as React from "react";

import { ToggleGroup } from "radix-ui";

export default () => {

	const [value, setValue] = React.useState("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

KeyDescription
Moves focus to either the pressed item or the first item in the group.
Activates/deactivates the item.
Activates/deactivates the item.
Moves focus to the next item in the group.
Moves focus to the next item in the group.
Moves focus to the previous item in the group.
Moves focus to the previous item in the group.
Moves focus to the first item.
Moves focus to the last item.
PreviousToggle
NextToolbar