Radix homepage

Toggle Group

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

import React from 'react';
import { styled } from '@stitches/react';
import { violet, blackA, mauve } from '@radix-ui/colors';
import { TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon } from '@radix-ui/react-icons';
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
const StyledToggleGroup = styled(ToggleGroupPrimitive.Root, {
display: 'inline-flex',
backgroundColor: mauve.mauve6,
borderRadius: 4,
boxShadow: `0 2px 10px ${blackA.blackA7}`,
const StyledItem = styled(ToggleGroupPrimitive.Item, {
all: 'unset',
backgroundColor: 'white',
color: mauve.mauve11,
height: 35,
width: 35,
display: 'flex',
fontSize: 15,
lineHeight: 1,
alignItems: 'center',
justifyContent: 'center',
marginLeft: 1,
'&:first-child': { marginLeft: 0, borderTopLeftRadius: 4, borderBottomLeftRadius: 4 },
'&:last-child': { borderTopRightRadius: 4, borderBottomRightRadius: 4 },
'&:hover': { backgroundColor: violet.violet3 },
'&[data-state=on]': { backgroundColor: violet.violet5, color: violet.violet11 },
'&:focus': { position: 'relative', boxShadow: `0 0 0 2px black` },
// Exports
export const ToggleGroup = StyledToggleGroup;
export const ToggleGroupItem = StyledItem;
// Your app...
const ToggleGroupDemo = () => (
<ToggleGroup type="single" defaultValue="center" aria-label="Text alignment">
<ToggleGroupItem value="left" aria-label="Left aligned">
<TextAlignLeftIcon />
<ToggleGroupItem value="center" aria-label="Center aligned">
<TextAlignCenterIcon />
<ToggleGroupItem value="right" aria-label="Right aligned">
<TextAlignRightIcon />
export default ToggleGroupDemo;


  • 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.Item />

Contains all the parts of a toggle group.

type*enumNo default value
valuestringNo default value
defaultValuestringNo default value
onValueChangefunctionNo default value
onValueChangefunctionNo default value
direnumNo default value
Data AttributeValues
[data-orientation]"vertical" | "horizontal"

An item in the group.

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 value="center">
<TextAlignCenterIcon />
<ToggleGroup.Item value="right">
<TextAlignRightIcon />

Uses roving tabindex to manage focus movement among items.

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.