Toggle Group - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/toggle-group

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

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

Examples

Outline

Outline variant.

Sizes

Size variants.

API Reference

Prop	Type	Default	Description
`type`*	`"single" \| "multiple"`	—	Whether single or multiple items can be pressed.
`value`	`string \| string[]`	—	The controlled value.
`onValueChange`	`(value: string \| string[]) => void`	—	Event handler for value changes.