Toggle Group

Basic

A toggle button group allows users to switch between multiple options, enabling one or more selections at a time.

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/toggle-group

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components tailwind-variants

Anatomy

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

<ToggleGroup>
  <ToggleGroupItem id="1d">1d</ToggleGroupItem>
  <ToggleGroupItem id="3d">3d</ToggleGroupItem>
  <ToggleGroupItem id="7d">7d</ToggleGroupItem>
  <ToggleGroupItem id="2w">2w</ToggleGroupItem>
</ToggleGroup>

Orientation

By default, the toggle button group is arranged horizontally. Use the orientation prop to switch to a vertical layout.

Selection mode

By default, the toggle button group allows only a single selection. You can change this by setting the selectionMode prop to "multiple". When in multiple selection mode, individual buttons will no longer have rounded corners.

Size

By default, the toggle button group has a medium size. You can change the size by using the size prop.

Square size

The size option also includes a square variant, which is useful when you only want to display an icon on the toggle button.

Controlled

You can control the state of the toggle button group by using the selectedKeys prop.

Disabled

You can disable an entire toggle group by setting the isDisabled prop on the ToggleGroup component, which disables all toggles in the group. Alternatively, you can disable specific toggle buttons individually by setting the isDisabled prop on the Toggle component.

Touch hitbox

Sometimes you may want to use this button with only an icon. In that case, you can apply the touch-target utility class on the sq-* size to increase the button’s hitbox for improved accessibility.

@utility touch-target {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-height: 44px;
    min-width: 44px;
    z-index: 9999;
  }
}