Toggle Group

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

Installation


pnpm dlx shadcn@latest add @force-ui-ember/toggle-group

Usage

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

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

Composition

Use the following composition to build a ToggleGroup:

ToggleGroup
├── ToggleGroupItem
└── ToggleGroupItem

Examples

Outline

Use @variant="outline" for an outline style.

Size

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

Spacing

Use @spacing={{2}} to add spacing between toggle group items.

Vertical

Use @orientation="vertical" for vertical toggle groups.

Disabled

Custom

A custom toggle group example.

API Reference

ToggleGroup

The main component that wraps toggle group items.

Prop	Type	Default
`@type`	`"single" \| "multiple"`	`"single"`
`@variant`	`"default" \| "outline"`	`"default"`
`@size`	`"default" \| "sm" \| "lg"`	`"default"`
`@spacing`	`number`	`2`
`@class`	`string`
`@disabled`	`boolean`	`false`
`@value`	`string \| string[]`
`@onValueChange`	`(value: string \| string[]) => void`

ToggleGroupItem

Individual toggle items within a toggle group. Remember to add an aria-label to each item for accessibility.

Prop	Type	Default
`@value`	`string`	Required
`@class`	`string`
`@disabled`	`boolean`	`false`

Toast Toggle

On This Page

Installation Usage Composition Examples Outline Size Spacing Vertical Disabled Custom API Reference ToggleGroup ToggleGroupItem

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.