Toggle Group

Installation

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

Usage

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

<ToggleGroup>
  <Toggle>Bold</Toggle>
  <Toggle>Italic</Toggle>
  <Toggle>Underline</Toggle>
</ToggleGroup>

Examples

Small Toggles

Large Toggles

With Outline Toggles

With Outline and Separator

Disabled

With Disabled Toggle

Multiple selection

With Tooltips

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with ui/topia quickly.

Prop Mapping

Quick Checklist

• Replace type="multiple" → multiple on ToggleGroup
• Remove type="single" from ToggleGroup
• Always use arrays for defaultValue
• Use Toggle going forward; ToggleGroupItem remains for legacy

Additional Notes

ui/topia toggle group sizes are more compact compared to shadcn/ui, making them better suited for dense applications:

So, for example, if you were using the default size in shadcn/ui and you want to preserve the original height, you should use the lg size in ui/topia.

Comparison Examples

<ToggleGroup type="multiple" defaultValue={["bold"]}>
  <ToggleGroupItem value="bold">B</ToggleGroupItem>
  <ToggleGroupItem value="italic">I</ToggleGroupItem>
  <ToggleGroupItem value="underline">U</ToggleGroupItem>
</ToggleGroup>

<ToggleGroup multiple defaultValue={["bold"]}>
  <Toggle value="bold">B</Toggle>
  <Toggle value="italic">I</Toggle>
  <Toggle value="underline">U</Toggle>
</ToggleGroup>