GitHub

Go to...

Choose a page to open.

A set of toggle buttons that share one value.

Toggle Group

toggle-group-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/toggle-group.json

Usage

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
<ToggleGroup defaultValue={["left"]}>
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

The value is always an array. Add multiple to let more than one item stay pressed.

Examples

Outline

Set spacing={0} to join the items.

toggle-group-outline