---
title: 输入框
slug: 输入框
category: 组件
figma_node_id: 1:17
figma_page_name: ＞输入框
aliases: [Input, TextField, 文本框, 文本输入, textarea]
last_extracted: 2026-05-19
status: ok
---

# 输入框

> 表单中最基础的文字 / 数字录入控件。支持单行 / 多行两种形态，左右 / 上下两种布局，覆盖默认 / Hover / 点击 / 输入 / 错误提示 / 输入多行 / 滚动等完整状态。单行高度 32px，多行高度 50px / 122px，最大宽度 328px（在桌面端规范画板中）。

## 类型与号型

| 类型 | 主要参数 | 适用场景 |
|---|---|---|
| 单行输入框 | 高 32px，宽 328px | 常规表单项（用户名、邮箱、手机号等） |
| 多行输入框（textarea） | 高 50px / 122px，宽 328px | 简介、备注、富文本前体 |
| 带字数计数的多行 | 122px + 右下 `0/500` 计数 | 含字数上限的内容编辑 |

### 布局形式

| 布局 | 适用 |
|---|---|
| 左右布局 | 横向空间充裕、标签 ≤6 字 |
| 上下布局 | 横向空间有限，或标签超过 6 字 / 长短差别大 |

> 左右两侧间距一致，上下排列，一般用于题头文字较长（超过 6 个汉字）或长短差别较大时。
> 左侧可以是图标或者题头文字（小于等于 6 个字）。

## 尺寸规格

数值来自 Figma `globalVars.styles` 中各布局 token：

| 规格 | 宽 × 高 | 来源 layout token |
|---|---|---|
| 单行输入框（默认 / Hover / 点击 / 输入 / 错误） | 328 × 32px | `layout_LQLB6B / IEY2JY / YFPJ43 / PWSJ39 / 9IW2JZ` |
| 多行 50px（带说明区） | 328 × 50px | `layout_5J6CTE` |
| 多行 122px（含滚动） | 328 × 122px | `layout_7CCCVX / 0LGBST / 0PV1M7 / 8E7A8A` |
| 左右布局示例区 | 328 × 54px | `layout_QN0NGK / 3HWP3K`（标签 + 输入框两段） |
| 圆角 | 4px | 所有矩形描边 `borderRadius: 4px` |
| 描边 | 0.5px | `strokeWeight: 0.5px` |
| 错误提示文字行高 | 12px | `style_OJ85KK` 12/12 Regular |
| 输入文字 | 13px Regular，行高 18px | `style_3XCRIC / XK34IM` |

桌面端规范画板：1280 × 3726px。

## 状态

输入框完整状态枚举（来自 Figma 状态说明文字）：

| 状态 | 含义 |
|---|---|
| 默认 | 未聚焦、未输入 |
| Hover | 鼠标悬停 |
| 点击 | 按下未释放 / 聚焦激活 |
| 输入 | 已有用户输入内容 |
| 错误提示 | 校验失败，描边变红并显示错误文案 |
| 输入多行 | textarea 多行输入态 |
| 滚动（最大高度视业务情况定） | 多行超出最大高度时的滚动态 |

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 容器底色 | `#FFFFFF` = `White` | 默认底色 |
| 默认描边 | `#C7CDD9` = `C-Coolgray50-暗` | 0.5px 描边 |
| placeholder 文字 | `#878D99` = `C-Coolgray60` | 13px Regular |
| 已输入文字 | `#11141A` | 主文字色 |
| 字数计数文字 | `#878D99` | 12px Regular，右对齐 |
| 错误描边 / 错误提示文字 | `#FF5040` | 警示语义色（同 `Vermilion60` 区段） |
| 不可用 / 内嵌图标背景 | `#F2F4F7` = `C-Coolgray30` | 输入框前导 icon 容器 |
| 章节大标题 | `#11141A` | 24px Medium |
| 小节标签文字 | `#17181A` | 12px Medium / 14px Regular |

> 关联 token 见 [色彩](../基础/色彩.md)。

## 间距与排布

- 单行内容：左内边距 16px（与图标对齐），图标占位 24×24px
- 状态示例区：每个状态垂直间隔 81px（`y` 坐标 1006/1087/1168/1249/1330/1427 步进 81）
- 错误提示文案：紧贴输入框下方 4px，红色 12px 字
- 多行输入框：内部文字行高 18px，最大高度由业务定，超出滚动
- 标签 + 输入框（左右布局）：标签宽度按 6 字内估约 64px，输入框 328px，间距固定

## 文案规则

- placeholder 默认值：`请填写`（Figma 中作为占位示例）
- placeholder 文案应清晰简洁，**避免与标签语义重复**（详见 [表单](表单.md) 文案规则）
- 错误提示文案：直接说明问题与解决路径，如「这里是错误提示文案」（Figma 占位）
- 字数计数格式：`已输入/总数`，如 `0/500`，右下角对齐

## 交互行为

- **默认 → Hover**：边框色加深一档（视觉提示可交互）
- **Hover → 点击 / 聚焦**：边框色变为品牌蓝；光标进入容器
- **输入态**：placeholder 隐藏，文字色切换为主色 `#11141A`，行内可显示光标 `|`
- **错误态**：描边变 `#FF5040`，下方出现错误提示文案
- **多行滚动**：当文字超过最大高度（由业务确定）时，启用内部滚动；外部不撑高
- **格式化输入**：手机号、身份证号、银行卡号自动按规则插入分隔（详见 [表单](表单.md)）
- **失焦**：触发即时校验

## 示例

![输入框-状态全集](../图片/组件/输入框/inputstatequan-ji.png)
![输入框-默认态](../图片/组件/输入框/input-default.png)
![输入框-Hover态](../图片/组件/输入框/input-Hover.png)
![输入框-点击态](../图片/组件/输入框/input-dian-ji.png)
![输入框-输入态](../图片/组件/输入框/input-input.png)
![输入框-错误提示](../图片/组件/输入框/input-errortip.png)
![输入框-输入多行](../图片/组件/输入框/input-inputmulti-line.png)
![输入框-滚动态](../图片/组件/输入框/input-scroll.png)
![左右布局示例](../图片/组件/输入框/leftrightlayoutexample.png)
![上下布局示例](../图片/组件/输入框/topbottomlayoutexample.png)

## 设计考量 / 原文摘录

> 上下布局：左右两侧间距一致，上下排列，一般用于题头文字较长（超过 6 个汉字）或长短差别较大时。
> 左侧可以是图标或者题头文字（小于等于 6 个字）。

- **统一描边权重 0.5px**：保证字号 13px 时的视觉精度，避免描边过粗压字
- **错误态用红色描边 + 红字提示**：让用户在 ≤1 秒内识别问题位置与原因
- **多行带计数**：把字数约束前置可视化，比提交时报错"超出 500 字"友好得多

## 不推荐用法

- 用 placeholder 替代标签（输入后失去上下文，违反「placeholder 是补充说明」）
- 单行输入框承担多行内容（不带滚动会被截断）
- 错误描边色用非 `#FF5040`（视觉语义不一致）
- 标签超过 6 字仍强行使用左右布局
- 在同一表单中混用单行 13px 与其他字号输入框（破坏对齐）

## 关联

- 表单容器与排布规则见 [表单](表单.md)
- 下拉类输入见 [下拉选择](下拉选择.md)
- 日期 / 时间输入见 [日期选择](日期选择.md)、[时间选择](时间选择.md)
- 字数计数与提示文案样式见 [横幅提示](横幅提示.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
- 字体 token 见 [字体](../基础/字体.md)
