Layout UI

Toggle Group

A group of related toggles sharing variant and size context. Built on Base UI ToggleGroup. Uses toggleVariants from the Toggle component.

Preview

Installation

bash
npx shadcn@latest add @layout/toggle-group

Usage

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

Examples

Multiple selection

Outline variant

Sizes

Guidelines for AI agents

Wrap ToggleGroupItem elements inside ToggleGroup. Set variant and size on ToggleGroup and they propagate automatically to all items. Use multiple prop for multi-select formatting bars. Always pass aria-label on the group.

Never

  • Nevermix variants on ToggleGroupItem when the group already sets one — override only for exceptions
  • Neveruse ToggleGroup for navigation; use Tabs instead
  • Neveromit aria-label on the ToggleGroup
  • Nevernest ToggleGroups

Tokens consumed

--layout-accent--layout-accent-fg--layout-muted--layout-input--layout-ring--layout-radius--layout-duration-base