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

Features

Full keyboard navigation.
Supports horizontal/vertical orientation.
Support single and multiple pressed buttons.
Can be controlled or uncontrolled.

Installation

Install the component from your command line.

npm install @radix-ui/react-toggle-group

Anatomy

Import the component.

import * as ToggleGroup from '@radix-ui/react-toggle-group';

export default () => (
  <ToggleGroup.Root>
    <ToggleGroup.Item />
  </ToggleGroup.Root>
);

API Reference

Root

Contains all the parts of a toggle group.

Prop	Type	Default
`asChild`	`boolean`	`false`
`type*`	`enum`	No default value
`value`	`string`	No default value
`defaultValue`	`string`	No default value
`onValueChange`	`function`	No default value
`value`	`string[]`	`[]`
`defaultValue`	`string[]`	`[]`
`onValueChange`	`function`	No default value
`disabled`	`boolean`	`false`
`rovingFocus`	`boolean`	`true`
`orientation`	`enum`	`undefined`
`dir`	`enum`	No default value
`loop`	`boolean`	`true`

Data Attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

Item

An item in the group.

Prop	Type	Default
`asChild`	`boolean`	`false`
`value*`	`string`	No default value
`disabled`	`boolean`	No default value

Data Attribute	Values
`[data-state]`	`"on" \| "off"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Examples

Ensuring there is always a value

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

Accessibility

Uses roving tabindex to manage focus movement among items.

Keyboard Interactions

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.

Toggle

Toolbar

Edit this page on GitHub.

Overview

Components

Utilities

Resources

Stitches

Colors

Icons