Toggle Group · paneui

Installation

pnpm dlx shadcn@latest add @paneui/toggle-group

Usage

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

<ToggleGroup multiple defaultValue={["bold"]} aria-label="Text style">
  <ToggleGroupItem value="bold" aria-label="Bold"><BoldIcon /></ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Italic"><ItalicIcon /></ToggleGroupItem>
</ToggleGroup>

Composition

ToggleGroup
└── ToggleGroupItem

Toggle

Examples

Outline

Single Toggle

Sizes

RTL

One value or many

The value is always an array. Without multiple it holds at most one item, so read value[0]; to stop the user clearing the choice, ignore empty arrays in onValueChange.

When to use something else

For a one-of-few value with a raised thumb (billing cycle, view mode) use SegmentedControl. Inside a Toolbar, use ToolbarToggle so the item joins the toolbar's arrow-key loop.

API Reference

Built on the Toggle Group primitive. Only the props this library adds or changes are listed; everything else passes through.

ToggleGroup

Also accepts every prop of ToggleGroup.

variant= "default": "default" | "outline"; default fills only the pressed item; outline frames every item, for settings panels.
size= "default": "xs" | "sm" | "default" | "lg"; Height 24 / 28 / 32 / 36px, matching the button sizes.

Prop	Type	Default	Description
variant	"default" \| "outline"	"default"	`default` fills only the pressed item; `outline` frames every item, for settings panels.
size	"xs" \| "sm" \| "default" \| "lg"	"default"	Height 24 / 28 / 32 / 36px, matching the button sizes.

data-variant: The group variant.
data-size: The group size.

Data attribute	Description
data-variant	The group variant.
data-size	The group size.

ToggleGroupItem

Takes variant / size from the group unless set. Also accepts every prop of Toggle.

value*: string; The item's value in the group.

Prop	Type	Default	Description
value*	string	—	The item's value in the group.

data-pressed: Present when pressed.
data-variant: The resolved variant.
data-size: The resolved size.

Data attribute	Description
data-pressed	Present when pressed.
data-variant	The resolved variant.
data-size	The resolved size.

Toggle

Also accepts every prop of Toggle.

variant= "default": "default" | "outline"; default fills only the pressed item; outline frames every item, for settings panels.
size= "default": "xs" | "sm" | "default" | "lg"; Height 24 / 28 / 32 / 36px, matching the button sizes.

Prop	Type	Default	Description
variant	"default" \| "outline"	"default"	`default` fills only the pressed item; `outline` frames every item, for settings panels.
size	"xs" \| "sm" \| "default" \| "lg"	"default"	Height 24 / 28 / 32 / 36px, matching the button sizes.