Radix homepage
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.

Install the component from your command line.

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

Import the component.

import * as ToggleGroup from '@radix-ui/react-toggle-group';
export default () => (
<ToggleGroup.Root>
<ToggleGroup.Item />
</ToggleGroup.Root>
);

Contains all the parts of a toggle group.

PropTypeDefault
asChildbooleanfalse
type*enumNo default value
valuestringNo default value
defaultValuestringNo default value
onValueChangefunctionNo default value
valuestring[][]
defaultValuestring[][]
onValueChangefunctionNo default value
disabledbooleanfalse
rovingFocusbooleantrue
orientationenumundefined
direnumNo default value
loopbooleantrue
Data AttributeValues
[data-orientation]"vertical" | "horizontal"

An item in the group.

PropTypeDefault
asChildbooleanfalse
value*stringNo default value
disabledbooleanNo default value
Data AttributeValues
[data-state]"on" | "off"
[data-disabled]Present when disabled
[data-orientation]"vertical" | "horizontal"

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>
);
};

Uses roving tabindex to manage focus movement among items.

KeyDescription
TabMoves focus to either the pressed item or the first item in the group.
SpaceActivates/deactivates the item.
EnterActivates/deactivates the item.
ArrowDownMoves focus to the next item in the group.
ArrowRightMoves focus to the next item in the group.
ArrowUpMoves focus to the previous item in the group.
ArrowLeftMoves focus to the previous item in the group.
HomeMoves focus to the first item.
EndMoves focus to the last item.