Yugen UI

ToggleGroup

ToggleGroup groups related ToggleButtons to pick one or several options.

type="single" for mutually exclusive choices (text alignment), type="multiple" for independent options (bold, italic, underline). Secondary and outline items are joined with shared borders; subtle and transparent items stand apart. The arrow keys move within the group.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { ToggleGroup, ToggleGroupItem } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Single selection

Controlled; empty values are ignored so one item always stays selected.

Subtle, with labels

appearance="subtle": items stand apart, and the selected one gets a background and a brand icon.

Outline, small

A compact time range picker.

Usage

Do
  • Set an aria-label on the group and on every icon-only item.
  • Use single for mutually exclusive choices, multiple for independent options.
Don't
  • Don't use it in place of Tabs to switch page content.
  • Don't use more than about 6 items. For more, use Menu or Select.

Props

Prop · TypeDefaultDescription
type"single" | "multiple"Default: —Required. Single or multiple selection.
value / defaultValuestring | string[]Default: —Selected value: a string with single, an array with multiple.
onValueChange(value) => voidDefault: —Called when the selection changes.
appearance"secondary" | "outline" | "subtle" | "transparent"Default: "secondary"Secondary/outline join borders; subtle/transparent keep items apart.
size"small" | "medium" | "large"Default: "medium"Item size.
orientation"horizontal" | "vertical"Default: "horizontal"Group direction and arrow keys.
ToggleGroupItem.value / iconstring / ReactNodeDefault: —Item value and icon.