Components

Toggle Group

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

import React from 'react';
import * as ToggleGroup from '@radix-ui/react-toggle-group';
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.

Installation

Install the component from your command line.

npm install @radix-ui/react-toggle-group

Anatomy

Import the component.

import * as ToggleGroup from '@radix-ui/react-toggle-group';
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 * as ToggleGroup from '@radix-ui/react-toggle-group';
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
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.
PreviousToggle