切换按钮组

安装

Command

Manual

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

安装以下依赖：

npm install radix-ui

将以下代码复制到你的项目中。

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

根据项目配置更新导入路径。

用法

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

描边

Use variant="outline" for an outline style.

尺寸

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.

从右到左布局

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

API 参考

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.