表单
Input - 输入框
一行文本输入。
用法
import { Input } from '@misoto22/folio'说明
单行文字输入。
和 Textarea、Select 共用 CONTROL_BASE，所以这三个不会各自漂走。标签、提示和错误交给 Field——一个只有 placeholder 没有标签的输入框等于没有标签，因为只要有人开始打字，placeholder 就消失了。
结构
| 部件 | 说明 |
|---|---|
| 控件盒子必填 | 那个 <input>，站在它和 Textarea、Select 触发器共用的 CONTROL_BASE 上。内边距是 --field-px / --field-py，所以标了 data-density="compact" 的子树，输入框会跟着按钮一起收紧。 |
| 占位文字 | placeholder，用 --ink-3-aa 写在盒子里——那正是值要占的同一个位置，这也是它当不了名字的原因。 |
| 聚焦边框 | focus:border-(--ink)，改的是本来就在的那条边框，不是外加一圈 ring。聚焦时盒子一个像素都不长，所以这一行里什么都不会挪位。 |
| 错误边框 | invalid——或者一个带着 error 的 Field 设上的 aria-invalid——换上来的东西。它只改边框颜色，别的一概不改，所以原因得由下面那条消息来说。 |
实践建议
推荐
- type 和 inputMode 都要写出来。不写 type 的 <Input> 就是 type="text"，所以一个从没交代过自己是邮箱的邮箱字段，拿到的是一个连 @ 都没有的手机键盘，浏览器那边一点校验都没有。
- 用 autoComplete 把这个字段的身份告诉浏览器：没有 current-password 或 new-password 的密码框，密码管理器会往里填错的值，浏览器也不会问要不要保存。
- 值是真的、只是不让改时，用 readOnly，不要用 disabled——disabled 的输入框既被 Tab 跳过，也不会出现在提交的表单数据里，所以一个读者明明看得见的字段，服务端一个字都听不到。
避免
- readOnly 在这里没有任何样式：CONTROL_BASE 只在 :disabled 时变淡，所以只读的输入框和可编辑的输入框逐像素一模一样，读者对它了解到的第一件事，是打字没有反应。
- type="number" 是给数量用的，不是给一串数字用的。电话号码、卡号、邮编会丢掉前导零；而滚轮划过聚焦中的控件，一个键都没按，值就变了。
- 套在 disabled 输入框上的 Tooltip 永远打不开——disabled:pointer-events-none 意味着这个控件收不到 hover——所以「它为什么被禁用」这句解释，只能改放进 Field 的 hint 里。
示例
default
静止、非法、禁用。invalid 会用 --danger 画边框、并设上 aria-invalid，仅此而已——边框只说「有什么不对」，从不说是什么不对，所以一个放在带错误消息的 Field 之外的 invalid 输入框，就是一个红盒子，后面什么理由都没接。这里每一个都带着 aria-label，因为它们在这儿是孤零零站着的；放进表单里，那是 Field 的活，而 placeholder 永远不是名字，因为任何人一开始打字它就走了。
types and autofill
type、inputMode 和 autoComplete，每一行都写全。一个什么都不说的 Input 就是 type="text"：于是邮箱字段拿到的是一个上面没有 @ 的电话键盘，也完全没有浏览器校验；而一个从不说 current-password 的密码字段，是密码管理器会填错值、且没有任何浏览器提出要帮你保存的那一种。手机号那一行用的是 type="tel" 而不是 type="number"——number 是给数量用的，它会把前导零丢掉，还会在滚轮底下改掉自己的值。
Australian numbers keep their leading zero.
read only
同一个意思，锁法有两种。readOnly 让字段留在 tab 顺序里、也留在提交出去的表单数据里；disabled 把它从两边都拿走，于是服务端对一个读者明明看得见的字段一无所知——只要这个值是真的、只是不给改，就该拿 readOnly。这里没有任何样式画 readOnly：控件只在 :disabled 时才变淡，所以一个只读字段和一个可编辑字段像素级一致，只能靠提示文字说明。Tooltip 也补不上禁用那一行的这个缺口，因为一个 disabled 的输入框收不到 hover。
Fixed at sign-up. Copy it, but it cannot be edited here.
Locked while an invoice is outstanding — this one sends nothing on submit.
无障碍
- placeholder 不是标签——只要有人开始打字它就消失了。请配合 Field 使用。