（四）数据输入

1、输入框

输入框是表单数据录入的基础组件，覆盖从单行短文本到多行长文本的全场景输入需求。通过尺寸梯度、状态反馈与辅助元素的组合，降低用户输入门槛，提升填写效率与准确性。

类型

分为文本与文本域两种。文本适用于单行短文本输入，内容超出时自动截断，用于用户名、手机号、邮箱等场景；文本域适用于多行长文本输入，支持自适应高度扩展，用于备注、描述、评论等场景。

尺寸

提供大、中、小三种高度，分别对应 40px、32px、24px。大尺寸用于页面核心表单与独立搜索框；中尺寸为默认规格，适配常规表单与数据筛选；小尺寸用于表格行内编辑与紧凑信息区。

交互状态

涵盖默认、输入中、悬停、提示、禁用五种状态。默认态展示占位提示。

辅助元素

包括前/后缀图标、辅助文字、密码。

使用规则

• 同表单内尺寸保持一致，禁止混排。
• 占位文字仅作提示，不可包含完成任务所需的关键信息。
• 文本域默认显示 3 行。
• 禁用状态用于条件未满足或权限不足，避免用户无效尝试。

2、数字输入框

步进器形数字输入框提供左右操作和右侧操作两种布局，通过增减按钮实现按固定步长的快捷调节，提升数值输入效率，同时也可兼顾手动输入。尺寸分为大 40px、中 32px、小 24px 三档；提供默认、悬停、聚焦、填充、禁用五种交互状态。

• 使用时必须设定最小值、最大值与步长，超出范围时禁用对应方向按钮。
• 长按按钮支持连续增减。
• 同表单内尺寸保持一致，禁止混排。

3、单选框

单选框用于在一组互斥选项中仅选择一个，通过明确的选中状态消除用户的多选困惑，适用于配置项、筛选条件、模式切换等场景。分为基础型和按钮型两种，其中按钮型分为大 44px、中 32px、小 24px 三种尺寸。涵盖默认、悬停、选中、禁用四种状态。支持水平排列与垂直排列。

• 一组单选框必须有一个默认选中项，通常为最安全或最常用的选项。
• 选项文案简洁清晰且长度大致相等，明确说明选择后的结果。
• 互斥选项数量建议在 2~7 个之间，过多时改用选择器。
• “是/否”或“开/关”类二态场景建议使用开关替代。

4、多选框

多选框用于从一组选项中选择一项或多项，通过勾选状态的明确反馈，适用于批量操作、多条件筛选、配置项组合等场景。涵盖默认、悬停、选中、半选、禁用五种状态。支持水平排列，选项间保持 16px 间距，保证触控热区不重叠。

5、日期选择器

日期选择器用于在表单中选择日期或时间，按精度分为年、月、日、时间五种，按选择方式分为单选与范围两种。单选模式适用于精确到某一点的日期录入；范围模式适用于起止时间的区间选择，如查询周期、有效期限等。涵盖默认、选中-当前、选中-非当前、置灰四种状态。

• 日期格式统一为 YYYY-MM-DD，时间格式为 HH:MM:SS。
• 范围选择时结束日期不得早于起始日期，非法组合自动拦截。

6、选择器

选择器用于从预设选项中选取一项或多项，通过折叠面板收纳选项，解决选项过多时的空间占用问题。分为单选与多选。单选仅选一项，适用于互斥选项；多选支持多项，已选项以标签展示或折叠为「+N」聚合。

尺寸分为大 40px、中 32px、小 24px，与输入框体系对齐。

涵盖默认、焦点、输入中、悬停、禁用五种状态。

• 已选值直接替换占位文字，多选超出宽度折叠为「+N」。
• 下拉面板选项过多时内部滚动，不撑开页面。
• 支持搜索过滤，无匹配时展示空状态。
• 同表单内尺寸一致，禁止混排。

7、级联选择器

级联选择器用于具有层级关联关系的多级选项选择，通过逐层展开确定最终项，适用于省市区、组织架构、分类目录等场景。分为单选与多选。单选仅选末端一项，逐级确认后回填完整路径；多选支持跨层级选择多项，已选项以标签展示或折叠为「+N」聚合。展开态以级联面板逐层展示，父级选中后子级联动高亮。最多支持 3 级展开，超出时建议改用树形选择器。

8、数据穿梭框

数据穿梭框用于在两个列表间批量转移数据项，适用于权限配置、分类归集等场景。分为多选与树结构两种。多选以平铺列表展示，适用于同级选项；树结构以层级树展示，适用于组织架构、分类目录等父子关联选项。

每个类型选项均提供默认、选中、悬停、置灰四类交互状态。

可选配搜索框与底部操作按钮。提供空状态展现样式。搜索框用于快速过滤待选项；底部按钮支持全选、清空等批量操作。

9、上传

上传用于将本地文件提交至服务器，支持点击选择或拖拽投放两种操作方式。上传文件交互操作共两种：点击上传及拖拽上传。

每种交互方式均提供文件、图片、图片墙三种类型。文件上传以列表展示已选文件；图片上传以缩略图预览；图片墙以网格矩阵排列，适用于多张图片的管理场景。涵盖上传前、上传中、上传成功、上传失败四种状态。

10、表单

表单用于结构化数据的批量录入与提交，通过统一的布局规则将多种输入组件组织为可扫描、可操作的页面单元。提供 12 类表单类型使用不同场景：输入框、自适应输入框、选择输入框、日期选择框、数字输入框、滑块、多选框、单选框、单选框（胶囊）、开关、评分、上传，可按需组合使用。

表单对齐方式分为顶对齐、左对齐、右对齐三种。

• 顶对齐将标签置于控件上方，适合表单较长或移动端场景，纵向扫描效率最高，是最推荐的默认方式。
• 左对齐将标签置于控件左侧且右对齐，适合中后台常规表单，标签长度相近时视觉节奏整齐。
• 右对齐将标签置于控件左侧且左对齐，适合标签长度差异较大的场景，帮助用户快速建立标签与控件的对应关系。

必填项需以红色星号标记；另外支持配置前缀图标辅助识别。

11、开关

开关用于在两种互斥状态间快速切换，适用于即时生效的设置项。尺寸分为大 40px、中 32px、小 28px。提供开启、关闭、开启禁用、关闭禁用四种状态。

• 开关操作即时生效，无需额外确认。
• 状态变化需有视觉反馈，开启时滑块带动效过渡。
• 标签文案明确说明开关控制的对象，避免歧义。

12、滑块

滑块分为单点滑块与区间滑块两种。单点滑块仅一个手柄，选择一个精确值；区间滑块双手柄，选择起始与结束的范围值。

涵盖默认、悬停/按下、置灰三种状态。可选配输入框。Tooltip 拖动时实时显示当前数值；输入框允许直接键入精确值，与滑块双向联动。

• 最小值与最大值必须明确标注，步长按场景设定。
• 区间滑块两手柄不可交叉重叠。
• 单点滑块支持点击轨道快捷跳转。

13、搜索

搜索框用于关键词检索，通过输入与图标触发搜索操作。分为线性与面性，线性边框勾勒，视觉轻量；面性实心背景，权重高。搜索图标位置如左置提示格式，如右置触发操作。

尺寸分为大 40px、中 32px、小 24px。提供默认、输入中、悬停、禁用四种状态。

• 回车与图标均可触发搜索。
• 输入中态支持一键清除。
• 搜索后保持关键词便于二次编辑。