A set of two-state buttons that can be toggled on or off.
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.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
type* | enum | |
value | string | |
defaultValue | string | |
onValueChange | function | |
value | string[] | [] |
defaultValue | string[] | [] |
onValueChange | function | |
disabled | boolean | false |
rovingFocus | boolean | true |
orientation | enum | undefined |
dir | enum | |
loop | boolean | true |
Data attribute | Values |
---|---|
[data-orientation] | "vertical" | "horizontal" |
An item in the group.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
value* | string | |
disabled | boolean |
Data attribute | Values |
---|---|
[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.
Key | Description |
---|---|
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. |