║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Toggle Group description: Provides a shared state to a series of toggle buttons.

<ComponentPreview name="toggle-group-demo" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/toggle-group

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @base-ui-components/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="toggle-group" title="components/ui/toggle-group.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

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

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

Examples

Small Toggles

<ComponentPreview name="toggle-group-sm" />

Large Toggles

<ComponentPreview name="toggle-group-lg" />

With Outline Toggles

<ComponentPreview name="toggle-group-outline" />

With Outline and Separator

<ComponentPreview name="toggle-group-outline-with-separator" />

Disabled

<ComponentPreview name="toggle-group-disabled" />

With Disabled Toggle

<ComponentPreview name="toggle-group-with-disabled-item" />

Multiple selection

<ComponentPreview name="toggle-group-multiple" />

With Tooltips

<ComponentPreview name="tooltip-grouped" />

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 coss ui quickly.

Prop Mapping

| Component | Radix UI Prop | Base UI Prop | | ------------- | ----------------------------------------- | -------------------------------------- | | ToggleGroup | type (enum, "single" or "multiple") | multiple (boolean, default: false) |

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

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

| Size | Height (shadcn/ui) | Height (coss ui) | | --------- | ------------------ | ---------------- | | sm | 32px | 28px | | default | 36px | 32px | | lg | - | 36px |

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 coss ui.

Comparison Examples

<span data-lib="radix-ui"> ```tsx title="shadcn/ui" // [!code word:type="multiple"] <ToggleGroup type="multiple" defaultValue={["bold"]}> <ToggleGroupItem value="bold">B</ToggleGroupItem> <ToggleGroupItem value="italic">I</ToggleGroupItem> <ToggleGroupItem value="underline">U</ToggleGroupItem> </ToggleGroup> ``` </span> <span data-lib="base-ui"> ```tsx title="coss ui" // [!code word:multiple] <ToggleGroup multiple defaultValue={["bold"]}> <Toggle value="bold">B</Toggle> <Toggle value="italic">I</Toggle> <Toggle value="underline">U</Toggle> </ToggleGroup> ``` </span>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║