梧桐设计语言v0.4.1

输入框Field

输入框：card 底、input 描边 1px、圆角 radius-md、聚焦时描边换 ring。标签 label 在上，选填在标签后用 meta + subtle 标注。

  • 尺寸 size：sm 32 / md 36（桌面默认） / lg 40 / xl 48（现场端）。xl 描边 1.5px、字 17——戴手套要看得见边界。输入框没有 field 档（56 太高，容 17 字用 48 够）。
  • 长文本字段右侧常驻麦克风按钮——语音是一等公民，不藏在键盘里、不放「更多」菜单。这是沉淀钩子能否收到真东西的唯一物理前提。
  • 日期在移动端用原生 input[type=date]，弹层在小屏不好用。
  • 拍照字段 capture="environment" 直接开后置相机。
  • 错误态描边 destructive，错误文案在下方用 meta + destructive，说明为什么与怎么办。

消费者提供：标签、值、占位、是否选填、错误文案、尺寸（sm / md / lg / xl）。

示例

import
import { Input, Textarea } from "@wutong/ui";

桌面表单

标签在上、选填标注、错误文案说为什么与怎么办

系统生成，不可改

现场端 + 常驻麦克风

size=xl：高 48、描边 1.5、字 17；长文本右侧麦克风不藏

API

属性类型默认说明
label / optional / helpReactNode / boolean / ReactNode—标签、「选填」标注、帮助文字
errorReactNode—错误文案，显示在下方并标红描边
size"sm" | "md" | "lg" | "xl""md"32 / 36 / 40 / 48。xl 是现场端：描边 1.5、字 17
Textarea.onMic() => void—传了就常驻麦克风按钮