组件 · 数据录入
ToggleGroup 切换按钮组
一组互斥或多选的切换按钮。
使用建议
- 避免：与 RadioGroup 表单提交语义混淆而不说明
- 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造
引入
tsx
import { ToggleGroup, ToggleGroupItem } from '@selrux/ui/toggle-group';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
代码演示
单选
type="single"，同一时间只按下一个。
多选
type="multiple"，variant="outline"。
受控、方向与尺寸
value / onValueChange 受控；orientation="vertical" 纵向；size 尺寸。
value = ["bold"]
API
属性覆盖：示例用到 8 / 8 个自有属性（100%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
ToggleGroup
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
variant | - | "soft" | "outline" | - |
type | - | "single" | "multiple" | - |
value | - | string | string[] | - |
defaultValue | - | string | string[] | - |
onValueChange | - | ((value: string | string[]) => void) | - |
orientation | - | "horizontal" | "vertical" | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
ToggleGroupItem
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value * | - | string | - |
另有 289 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。
导出类型：ToggleGroupItemProps、ToggleGroupOrientation、ToggleGroupProps、ToggleGroupSize、ToggleGroupType、ToggleGroupVariant