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