Toggle group

A row of toggles: one choice (day, week, month) or several (bold, italic). Arrow keys move between them.

Installation

npx rasengan-ui add toggle-group

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/toggle-group.json

It installs Toggle too.

Usage

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
export function Range() {
  return (
    <ToggleGroup defaultValue={["week"]} variant="outline" aria-label="Range">
      <ToggleGroupItem value="day">Day</ToggleGroupItem>
      <ToggleGroupItem value="week">Week</ToggleGroupItem>
      <ToggleGroupItem value="month">Month</ToggleGroupItem>
    </ToggleGroup>
  );
}

Several at once

By default one item is pressed at a time. Pass multiple to let several be pressed, as for text styles. The value is always an array.

<ToggleGroup multiple defaultValue={["bold"]} aria-label="Text style">…</ToggleGroup>

Variants and sizes

variant (default, outline or soft) and size (sm, default, lg) on the group apply to every item, as on Toggle; an item can set its own.

Villages

The outline variant draws one bordered control with dividers between its items, in the village's radius and border width.

Accessibility

• A group of aria-pressed buttons: name it with aria-label.
• Tab enters the group once; arrow keys move between items, Space presses one.

API reference

The parts of Base UI's Toggle Group: