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>
<ToggleGroupItem value="center" aria-label="Center aligned">
<TextAlignCenterIcon />
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Right aligned">
<TextAlignRightIcon />
</ToggleGroupItem>
</ToggleGroup>
);
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 | "ltr" |
loop | boolean | true |
An item in the group.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
value* | string | |
disabled | boolean |
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. |