梧桐设计语言v0.4.1

选择控件Selection

复选框、单选、开关。三者都是 16px 控件(现场端 24),input 描边 1.5px、圆角 radius-chip(复选)/ 圆(单选);选中态是主色实心——这是主色允许出现的三处之一。


  • 复选框:4px 圆角方块,选中 primary 底 + primary-foreground 对勾;半选是一条横线。
  • 单选:圆,选中外环 primary + 内点。
  • 开关:轨道 36×20,圆角 10(唯一例外的胶囊——它模拟物理开关),开 primary、关 border。只用于「立即生效」的设置项,需要提交的表单里用复选框。
  • 标签在右,点标签也能选;整行可点区域高 32(桌面)/ 56(现场)。
  • 禁用:控件 secondary 底、标签 subtle

消费者提供:状态、标签、禁用。

示例

import
import { Checkbox, Radio, Switch } from "@wutong/ui";

复选、单选、开关

选中态是主色实心——主色允许出现的三处之一






API

属性类型默认说明
checked / onChangeboolean / ChangeEvent受控;原生 input 属性全部透传
Checkbox.indeterminateboolean半选
disabledboolean控件 secondary 底、标签 subtle