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

---

title: Toggle Group description: Group of toggling buttons...🤙 lastUpdated: 09 Sep, 2025 links: source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/ToggleGroup.tsx

<ComponentShowcase name="toggle-group-style-default" /> <br /> <br /> <ComponentInstall> <ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/toggle-group" /> <ComponentInstall.Manual> #### 1. Install dependencies:

npm install @radix-ui/react-toggle-group @radix-ui/react-toggle

<br />

2. Copy the code 👇 into your project toggle.tsx:

<ComponentSource name="toggle" /> <br />

3. Copy the code 👇 into your project toggle-group.tsx:

<ComponentSource name="toggle-group" /> </ComponentInstall.Manual> </ComponentInstall> <br /> <br />

Usage

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

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

<br /> <br />

Examples

Default

<ComponentShowcase name="toggle-group-style-default" /> <br /> <br />

Outlined

<ComponentShowcase name="toggle-group-style-outlined" /> <br /> <br />

Solid

<ComponentShowcase name="toggle-group-style-solid" /> <br /> <br />

Outline Muted

<ComponentShowcase name="toggle-group-style-outline-muted" />

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