Toggle Group

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

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

Create your styled toggle group component from the primitive parts.

import { styled } from 'path-to/stitches.config';
import * as ToggleGroup from '@radix-ui/react-toggle-group';
const StyledItem = styled(ToggleGroup.Item, {
appearance: 'none',
backgroundColor: 'transparent',
border: 'none',
padding: '5px 10px',
margin: '0 1px',
boxShadow: 'inset 0 0 0 1px gainsboro',
overflow: 'hidden',
borderRadius: 3,
'&:focus': {
outline: 'none',
boxShadow: 'inset 0 0 0 1px dodgerblue, 0 0 0 1px dodgerblue',
},
'&[data-state=on]': {
backgroundColor: 'gainsboro',
},
});
export default () => (
<ToggleGroup.Root type="single">
<StyledItem value="left">Left</StyledItem>
<StyledItem value="center">Center</StyledItem>
<StyledItem value="right">Right</StyledItem>
</ToggleGroup.Root>
);

Contains all the parts of a toggle group.

PropTypeDefault
asenumdiv
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
asenumbutton
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.