Toggle Group

Installation

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Install the following dependencies:

npm install radix-ui

Copy and paste the following code into your project.

View complete source: components/ui/toggle-group.tsx

Update the import paths to match your project setup.

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.

Size

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

Spacing

Use spacing to add spacing between toggle group items.

Vertical

Use orientation="vertical" for vertical toggle groups.

Disabled

Custom

A custom toggle group example.

RTL

To enable RTL support in JGuang UI, see the RTL configuration guide.

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.