117k
New

切换组

PreviousNext

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

Radix UIBase 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"

RTL

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

"use client"

import * as React from "react"

API 参考

参见 Base UI Toggle Group 文档。

更新日志

2026-05-17 默认间距

将默认 spacing 从 0 更改为 2，因此切换组默认会在项目之间显示间距。对于连接在一起的项目，请使用 spacing={0}。