Toggle Group

A set of two-state buttons that can be toggled on or off.

Installation

npx shadcn@latest add https://exawizards.com/exabase/design/registry/toggle-group.json

Usage

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

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

API

See the Toggle Group – Radix Primitives (opens in a new tab) documentation.

Examples

Outline

Single

Small

Large

Disabled