组件 · 输入 · 06
输入框 输入框 = 带标签的字段，有提示、错误、聚焦环三种状态；说出状态才生成得准。
直达修改 Prompt →
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a text input with label and states.
STYLE
- 12px radius, hairline border, 16px label
STATES
- default, focus, error, disabled
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Add an error state to the existing email input.
Use:
- red border (1px, #ff3b30)
- error text below the field: "Enter a valid email."
- red tint on focus
Keep the label, value and position unchanged.
Only add the error treatment.
Create a text input field, replacing the existing one.
Requirements:
- 12px radius, hairline border, 40px height
- label above the field, helper text below
- focus: 3px accent ring, never removed
- error: red border plus a message that names the fix
- disabled: dimmed and not focusable
- optional leading icon inside the control
Keep the surrounding form layout unchanged.
MOTION
- Focus: border and ring, 140ms ease-out.
- Floating label: 160ms ease-out, no jitter, no overshoot.
- Error: at most one 200ms shake. Never loop it.
- Do not animate width or height. prefers-reduced-motion: colour only.
修改类 Prompt 只动目标，不碰页面其余部分。
输入框是什么？ 输入框用来收集一个值。写明标签、占位、辅助说明、错误和焦点环，否则模型会跳过状态。
变体 点击属性即可在预览中高亮。
默认 输入或报错前字段的默认有效状态。
错误 无效状态：红色边框 + 提示文案，通常阻止提交。
禁用 不可交互的控件，置灰且不可聚焦。
带图标 在控件内前置图标的字段（搜索、日历等）。
标签 字段的名称文字，简短并置于输入框上方。
提示 字段下方的可选辅助文字，用于引导输入。
焦点环 键盘聚焦时显示的轮廓，必须清晰可见，不可去掉。
错误文案 字段无效时显示的信息，说明该如何修正。 状态 点击属性即可在预览中高亮。
默认 输入或报错前字段的默认有效状态。
聚焦 键盘聚焦状态：清晰的焦点环或边框变化，永远不要去掉。
错误 无效状态：红色边框 + 提示文案，通常阻止提交。
禁用 不可交互的控件，置灰且不可聚焦。 结构解剖 这些是 Prompt 里应该点名的部件。
01 标签 02 输入区 03 辅助说明 04 焦点环 什么时候用 收集短文本：邮箱、姓名、搜索词 需要行内校验的任何表单 表格与列表上方的筛选输入 什么时候别用 长文本——改用多行输入框 从已知列表中选择——改用选择器 只读展示——直接用文本 复制 Prompt Create a text input with label and states.
STYLE
- 12px radius, hairline border, 16px label
STATES
- default, focus, error, disabled
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui