# Input 输入框

当光标位于输入框时，允许用户输入或编辑文本内容的基本表单组件，可与输入框，搜索框，下拉框，日期选择器等灵活组合使用。

# 设计说明

# 使用说明

# 单行输入框

• 直接输入更为简单时：当直接输入相比使用其他输入组件更为方便简单时（如：输入用户自己的姓名电话号码时），适合使用单行输入框。

输入框只能容纳一行文字，如果输入的内容超过了输入框的宽度，超出的部分会自动往后延续。

# 文本域

• 输入的内容自由度高时：当用户输入的内容难以预测或具有较高自由度时（如：填写患者诊断），适合使用文本域。

高度自适应的输入框，容器随内容向下扩展；

也可以拉动右下角调节标，以实现自定义文本域大小的功能。

# 回车触发搜索

• 输入信息后执行搜索操作的场景。

# 点击按钮和回车触发

• 如果用户在输入关键字后按下回车键，但页面上没有出现预期的结果，他们可能需要使用搜索按钮重新执行搜索；
• 在用户填写多条信息后，需要点击搜索按钮以触发搜索操作。

# 体温录入

• 对个人或群体的体温进行记录、跟踪和管理时，使用体温录入框。

体温录入时，确保输入的体温值在 30.0℃ 至 45.0℃ 之间，可保留一位小数，如果输入的体温值超过或低于该区间，会自动将其内容清除。

# 显示密码切换图标

• 密码输入框主要用于保护用户隐私，防止在公共场合输入密码时被他人窥视。

密码输入框主要用于保护用户隐私，防止在公共场合输入密码时被他人窥视。

# 带辅助文字

• 用户需要容器底部的帮助性文字时，可以动态展示有助于用户完成输入的相关信息（如：内容推荐、字符数限制、错误提示），一般为不带标点符号的陈述句，建议最多一行。

当输入框为空时，默认情况下不显示清除图标，当用户激活已有内容的输入框时，清空图标将自动出现在输入框的尾部，以方便用户快速清空输入内容。

# 选择输入框

• 用户输入负担较重时：当用户不知道应该输入什么时（如：药品名称，可考虑使用下拉菜单）。

触发下拉的方式有聚焦时展开列表、输入时展开列表、自定义模板。

# 复合输入框

• 用户需要从预定义的选项中选择，同时又需要提供自定义输入的可能性的场景中。

# 尺寸

• 输入框容器一般为以下四种默认高度：24px（小型），28px（中型），32px（默认），36px（超大），同一业务内建议采用统一的高度；
• 容器长度应满足用户的期望，同时需确保能够直接展示出核心内容；
• 为了确保容器外的信息与容器之间的关联紧密，标题文字和辅助文字应与容器保持一定的距离，间距默认为 8px 。

# 状态

• 输入框共有 9 种不同的状态，分别为：默认状态、焦点状态、选中状态、完成状态、禁用状态、普通状态、警告状态、成功状态、错误状态。