Docs
Components
Toggle Group

Toggle Group

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

Preview

Code

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/toggle-group

Anatomy

import { ToggleGroup } from "~/components/ui/toggle-group";

<ToggleGroup.Root selectionMode="single">
  <ToggleGroup.Item id="a">A</ToggleGroup.Item>
  <ToggleGroup.Item id="b">B</ToggleGroup.Item>
  <ToggleGroup.Item id="c">C</ToggleGroup.Item>
</ToggleGroup.Root>;

Examples

Outline

Preview

Code

Single

Preview

Code

Small

Preview

Code

Large

Preview

Code

Disabled

Preview

Code

Spacing

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

Preview

Code

API Reference

ToggleGroup.Root

Prop	Type	Default
`selectionMode`	`enum`	`"multiple"`
`selectedKeys`	`Iterable<Key>`
`defaultSelectedKeys`	`Iterable<Key>`
`onSelectionChange`	`function`
`variant`	`enum`	`"default"`
`size`	`enum`	`"default"`
`spacing`	`number`	`0`
`isDisabled`	`boolean`
`orientation`	`enum`	`"horizontal"`
`children`	`ReactNode`

ToggleGroup.Item

Prop	Type	Default
`id`	`Key`
`isDisabled`	`boolean`
`variant`	`enum`
`size`	`enum`
`children`	`ReactNode`

Toast Toggle

On This Page

Installation
Anatomy
Examples
Outline
Single
Small
Large
Disabled
Spacing
API Reference
ToggleGroup.Root
ToggleGroup.Item

Contribute