124k
New

切换组

PreviousNext

一组可切换开关状态的两态按钮。

Base UIReact AriaRadix UI
Radix UI
import { Bold, Italic, Underline } from "lucide-react"

import {

安装

pnpm dlx shadcn@latest add toggle-group

使用

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>

组合

使用以下组合来构建 ToggleGroup：

ToggleGroup
├── ToggleGroupItem
└── ToggleGroupItem

轮廓

使用 variant="outline" 获取轮廓样式。

import {
  ToggleGroup,
  ToggleGroupItem,

大小

使用 size 属性更改切换组的大小。

import {
  ToggleGroup,
  ToggleGroupItem,

间距

使用 spacing 为切换组项之间添加间距。

import {
  ToggleGroup,
  ToggleGroupItem,

垂直

使用 orientation="vertical" 创建垂直切换组。

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

import {

已禁用

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

import {

自定义

一个自定义切换组示例。

Use font-normal to set the font weight.

"use client"

import * as React from "react"

从右到左

要在 shadcn/ui 中启用从右到左支持，请参阅 从右到左配置指南。

"use client"

import {

API 参考

请参阅 Radix Toggle Group 文档。

更新日志

2026-05-17 默认间距

将默认 spacing 从 0 更改为 2，使切换组默认在各项之间显示间距。对于相连的项，请使用 spacing={0}。