输入框 Input
单行文本输入。标签、提示与错误的写法见表单字段。
状态
examples/input/states.html
html
h-11 w-full rounded-lg border border-input bg-background px-3.5 text-sm text-foreground transition-colors
placeholder:text-muted-foreground
focus:border-brand focus:ring-3 focus:ring-ring/20 focus:outline-none
disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground
aria-invalid:border-destructive aria-invalid:focus:ring-destructive/20常见类型
选对 type、inputmode 与 autocomplete，手机上会弹出合适的键盘，浏览器也能正确自动填充。
examples/input/types.html
| 内容 | 属性 |
|---|---|
| 邮箱 | type="email" autocomplete="email" |
| 手机号 | type="tel" inputmode="numeric" autocomplete="tel-national" |
| 验证码 | 使用验证码输入组件 |
| 日期 | 使用日期选择组件，不用 type="date"（各浏览器外观与格式不一致） |
| 金额 | inputmode="decimal"，数字使用 font-mono |
| 证件号 | autocomplete="off" spellcheck="false"，font-mono uppercase |
前后缀与操作
examples/input/addons.html
- 前置图标：外层
relative，图标absolute left-3.5，输入框改为pl-10 - 后缀单位：
absolute right-3.5，输入框改为pr-14 - 输入框 + 按钮：
flex gap-2，按钮同为 44px 高，输入框加min-w-0防止撑破
交互脚本
| 属性 | 作用 |
|---|---|
data-cb-digits | 只保留数字，粘贴的空格、横线会被去掉 |
data-cb-countdown="60" | 点击后禁用按钮并倒计时，data-countdown-text="{s} 秒后重发" 定义倒计时文案 |
data-cb-countdown-manual | 点击时不自动开始，接口成功后调用 CbtisUI.startCountdown(button) |
使用建议
推荐
- 输入框宽度与预期内容长度匹配，但在移动端一律通栏
- placeholder 只写示例（「例如：CHAN」），不写说明
避免
- 用 placeholder 代替标签
- 禁止粘贴（尤其是邮箱确认、验证码）
无障碍
- 禁用的输入框不会被提交也不能聚焦；只读但需要被读到的内容用
readonly - 自动填充：Chrome / Safari 自动填充时可能不触发
input事件，Vue 等框架中需要额外监听change/animationstart（v2 的TextInput.vue已处理）
与 v2 的差异
| v2 现状 | 规范 |
|---|---|
焦点环 ring-2 ring-ring/30，按钮是 ring-3 ring-ring/50，两套 | 表单控件统一 ring-3 ring-ring/20 + 品牌蓝描边 |
| 没有禁用样式 | 增加 disabled:bg-muted |
样式在 TextInput.vue、kyc/classes.ts、model.ts 各写一份 | 以本页类名为准 |