Toggle Group

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

Installation

The component depends on the Toggle component. Install it first.

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/toggle-group.json

Usage

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

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

Examples

Default

Single

Outline

Use variant="outline" for an outline style.

Size

Use the size prop to change the size of the toggle group.

Spacing

Use spacing to control the space between toggle group items. Set spacing={0} to join the items into a single bar.

Vertical

Use orientation="vertical" for vertical toggle groups.

Disabled

Custom

A custom toggle group example.