组件 · 输入 · 07
多行输入 多行输入 = 固定行数的多行输入框，可垂直拉伸，带接近上限时预警的字数计数器。
直达修改 Prompt →
What went wrong? The export stopped at 40% and never resumed.
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a textarea component.
STYLE
- 4 rows tall, 12px radius, 14px #1D1D1F text on #FFFFFF
- 1px #C7C7CC border, focus swaps it for a 2px #0071E3 ring
- resize vertical only, with a visible handle in the bottom-right
- helper text 12px #6E6E73 under the field
STATES
- default, focus, error with #FF3B30 border and message, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing textarea show a character counter.
Use:
- a 12px counter at the bottom-right of the field
- it turns #FF3B30 at 90% of the limit, hard stop at 100%
- keep rows, radius and focus ring unchanged
Only add the counter.
Create a textarea component, replacing the existing one.
Requirements:
- 4 rows default, 12px radius, 14px text, line-height 1.5
- resize vertical only; a small handle sits in the bottom-right
- focus swaps the border for a 2px #0071E3 ring
- counter at 90% turns #FF3B30, blocks input at the limit
- error state: #FF3B30 border plus a 12px message under the field
Keep the form layout unchanged.
MOTION
- Focus: border and ring, 140ms ease-out.
- Auto-grow: 120ms ease-out, and cap the animated height.
- Character count warning: colour only, no shake.
- Do not animate width. prefers-reduced-motion: colour only.
修改类 Prompt 只动目标，不碰页面其余部分。
多行输入是什么？ 多行输入框收集成句的内容。点名行数、缩放方向，以及接近上限时计数器做什么。
变体 点击属性即可在预览中高亮。
基础 在 Prompt 里写明这个类型。
带计数 在 Prompt 里写明这个类型。
自动增高 在 Prompt 里写明这个类型。
行数 给具体值，不要只给感觉词。
缩放 给具体值，不要只给感觉词。
计数器 给具体值，不要只给感觉词。
标签 字段的名称文字，简短并置于输入框上方。
禁用 不可交互的控件，置灰且不可聚焦。 状态 点击属性即可在预览中高亮。
默认 输入或报错前字段的默认有效状态。
聚焦 键盘聚焦状态：清晰的焦点环或边框变化，永远不要去掉。
错误 无效状态：红色边框 + 提示文案，通常阻止提交。
禁用 不可交互的控件，置灰且不可聚焦。 结构解剖 这些是 Prompt 里应该点名的部件。
01 标签 02 输入区 03 缩放手柄 04 辅助文字 05 计数器 什么时候用 客服留言与缺陷报告 承载段落的 prompt 与备注字段 有可见字数预算的个人简介 什么时候别用 答案只有一行——改用单行输入 文本需要排版——改用富文本编辑器 字数限制不可见、提交时才报错 Lock the horizontal axis — a sideways-resized textarea breaks every layout it lands in.
复制 Prompt Create a textarea component.
STYLE
- 4 rows tall, 12px radius, 14px #1D1D1F text on #FFFFFF
- 1px #C7C7CC border, focus swaps it for a 2px #0071E3 ring
- resize vertical only, with a visible handle in the bottom-right
- helper text 12px #6E6E73 under the field
STATES
- default, focus, error with #FF3B30 border and message, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui