120k
New

Toggle Group

PreviousNext

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

Base UIReact AriaRadix UI
Radix UI
import Bold from "@material-symbols/svg-400/rounded/format_bold.svg?react"
import Italic from "@material-symbols/svg-400/rounded/format_italic.svg?react"
import Underline from "@material-symbols/svg-400/rounded/format_underlined.svg?react"

Installation

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

Usage

import { ToggleGroup, ToggleGroupItem } from "@/components/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

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 from "@material-symbols/svg-400/rounded/format_bold.svg?react"
import ItalicIcon from "@material-symbols/svg-400/rounded/format_italic.svg?react"
import UnderlineIcon from "@material-symbols/svg-400/rounded/format_underlined.svg?react"

Disabled

import Bold from "@material-symbols/svg-400/rounded/format_bold.svg?react"
import Italic from "@material-symbols/svg-400/rounded/format_italic.svg?react"
import Underline from "@material-symbols/svg-400/rounded/format_underlined.svg?react"

Custom

A custom toggle group example.

Use font-normal to set the font weight.

"use client"

import * as React from "react"

RTL

To enable RTL support in Force UI, 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.