Toggle Group

A set of toggles where one or several can be on.

<ToggleGroup defaultValue={["bold"]} multiple size="icon" variant="outline">  <ToggleGroupItem aria-label="Toggle bold" value="bold">    <HugeiconsIcon icon={TextBoldIcon} />  </ToggleGroupItem>  <ToggleGroupItem aria-label="Toggle italic" value="italic">    <HugeiconsIcon icon={TextItalicIcon} />  </ToggleGroupItem></ToggleGroup>

Installation

$ npx shadcn@latest add @constella/toggle-group

Usage

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

<ToggleGroup>  <ToggleGroupItem value="a">A</ToggleGroupItem>  <ToggleGroupItem value="b">B</ToggleGroupItem></ToggleGroup>

Without multiple, one item is on at a time.

Composition

ToggleGroup└── ToggleGroupItem

Multiple

Without multiple, one item is on at a time, like an alignment. With it, any can be, like text styles.

<ToggleGroup defaultValue={["left"]}>…</ToggleGroup><ToggleGroup defaultValue={["bold", "italic"]} multiple>…</ToggleGroup>

Spacing

Use the spacing prop to set the gap. At 0 the items join into one row, as in a Button Group.

Spacing	Gap
`0`	Joined
`1`	4px
`2`	8px

<ToggleGroup defaultValue={["all"]} spacing={0} variant="outline">  <ToggleGroupItem value="all">All</ToggleGroupItem>  <ToggleGroupItem value="unread">Unread</ToggleGroupItem></ToggleGroup>

With Icon

Put an icon before an item's label, marked data-icon="inline-start", for a segmented view switcher.

<ToggleGroupItem value="grid">  <HugeiconsIcon data-icon="inline-start" icon={GridViewIcon} />  Grid</ToggleGroupItem>

Orientation

Use orientation="vertical" to stack the items. Arrow keys follow the axis.

<ToggleGroup orientation="vertical" spacing={0} variant="outline">  …</ToggleGroup>

Size

Use the size prop on ToggleGroup; every item takes it.

<ToggleGroup size="icon-sm">…</ToggleGroup>

Disabled

Add disabled to a ToggleGroupItem to turn one off, or to ToggleGroup for all of them.

<ToggleGroupItem disabled value="archived">  Archived</ToggleGroupItem>

API Reference

Part	Adds
`ToggleGroup`	`variant` and `size`, passed to every item; `spacing`: `0`, `1` or `2`

Every part takes sx, applied last. For the rest, see Base UI Toggle Group.