表单

ToggleGroup

分段控件：若干选项，一条。

什么时候用它

它改的是一个值。切换面板的是 Tabs。

示例

default

single — one of these

multiple — any of these

一个分段控件：若干选项，一条。

type="single" 是一次选择——Radix 给它单选语义，视图切换器或密度设置就该是这个形状。type="multiple" 是一组互相独立的开关，那是另一回事，播报方式也不一样；选错了，一个“按标签筛选”的控件就会告诉读屏软件：选中一个标签会取消其他标签。

这两者刻意长得不一样。单值的一条会把一个填充药丸在选项之间移动，眼睛跟着一个在走的东西；多值的一条则各自填充每个按下的选项，因为没有一个“唯一选中”可以移动。两个人看同一张截图，应该能分辨出自己看的是哪一种，而在这之前他们分辨不出来。

和 Tabs 不同，那个切换的是面板，并且拥有 tabpanel 关系。切换组改变的是一个值。

同时接受 ComponentProps<typeof ToggleGroupPrimitive.Root> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。

Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.

一段。

在单值组里，这一项自己不画背景——背后那个移动的药丸在画——所以它只改变墨色。在多值组里它自己填充，因为没有东西在移动。

同时接受 ComponentProps<typeof ToggleGroupPrimitive.Item> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。