选择控件Selection
复选框、单选、开关。三者都是 16px 控件(现场端 24),input 描边 1.5px、圆角 radius-chip(复选)/ 圆(单选);选中态是主色实心——这是主色允许出现的三处之一。
- 复选框:4px 圆角方块,选中
primary 底 + primary-foreground 对勾;半选是一条横线。
- 单选:圆,选中外环
primary + 内点。
- 开关:轨道 36×20,圆角 10(唯一例外的胶囊——它模拟物理开关),开
primary、关 border。只用于「立即生效」的设置项,需要提交的表单里用复选框。
- 标签在右,点标签也能选;整行可点区域高 32(桌面)/ 56(现场)。
- 禁用:控件
secondary 底、标签 subtle。
消费者提供:状态、标签、禁用。
示例
import { Checkbox, Radio, Switch } from "@wutong/ui";
复选、单选、开关
选中态是主色实心——主色允许出现的三处之一
API
| 属性 | 类型 | 默认 | 说明 |
|---|
| checked / onChange | boolean / ChangeEvent | — | 受控;原生 input 属性全部透传 |
| Checkbox.indeterminate | boolean | — | 半选 |
| disabled | boolean | — | 控件 secondary 底、标签 subtle |