Radix homepageRadix Homepage
PrimitivesBeta

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
const ToggleGroup = StyledToggleGroup;
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>
<ToggleGroupItem value="center" aria-label="Center aligned">
<TextAlignCenterIcon />
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Right aligned">
<TextAlignRightIcon />
</ToggleGroupItem>
</ToggleGroup>
);
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
direnum"ltr"
loopbooleantrue

An item in the group.

PropTypeDefault
asChildbooleanfalse
value*stringNo default value
disabledbooleanNo default value

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.