Input 输入框
录入单行文本、邮箱、搜索词等符合原生输入语义的值。
使用概览
适合使用
- 用户需要输入较短且可在单行中完成的文本或数值时。
不建议使用
- 内容需要多行编辑，或候选值应从受控列表中选择时。
真实示例
邮箱输入框
利用原生邮箱类型和自动填充收集地址。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/input.json基础用法
导入
import { Input } from "@richardqiu/quartz/input";JSX
<Input name="email" type="email" placeholder="name@example.com" autoComplete="email" />状态与控制摘要
默认
键盘焦点可见
已禁用
无效
只读
placeholder · textdisabled · booleanreadOnly · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
type | HTMLInputTypeAttribute | "text" | 选择与数据含义一致的原生输入类型。 |
组合结构
- 01
Input
键盘约定
- Tab 聚焦未禁用的输入框，编辑按键遵循原生输入类型。
可访问性契约
- 连接可见标签，并保留原生 name、required、disabled 与 readOnly 语义。
- 帮助和错误信息通过 Field 声明的 ID 合并到 aria-describedby。