Toggle Group

import { Bold, Italic, Underline } from "lucide-react"

import {

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add toggle-group
Copy

Usage#

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

Copy<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:

CopyToggleGroup
├── ToggleGroupItem
└── ToggleGroupItem

Examples#

Outline#

Use variant="outline" for an outline style.

import {
  ToggleGroup,
  ToggleGroupItem,

Size#

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

import {
  ToggleGroup,
  ToggleGroupItem,

Spacing#

Use spacing to add spacing between toggle group items.

import {
  ToggleGroup,
  ToggleGroupItem,

Vertical#

Use orientation="vertical" for vertical toggle groups.

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

import {

Disabled#

import { Bold, Italic, Underline } from "lucide-react"

import {

Custom#

A custom toggle group example.

"use client"

import * as React from "react"

RTL#

To enable RTL support in DWL Components, see the RTL configuration guide.

"use client"

import {

API Reference#

See the Radix Toggle Group documentation.

Changelog#

2026-05-17 Default Spacing#

Changed the default spacing from 0 to 2 so toggle groups render with space between items by default. Use spacing={0} for connected items.