Toggle Group

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/toggle-group

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components tailwind-variants cn

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>

Examples

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

Pass selectedKeys and update it with onSelectionChange to control the selected toggles.

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

For icon-only buttons, use a sq-* size and the touch-target utility to increase the interactive area.

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

Component API

ToggleGroup

ToggleGroupItem