文字输入

用于在一行中输入任意文本、数字和符号值的组件。可用于页面表单和对话框以及登录、搜索和筛选表单。

§应用程序

与 TextArea 不同，它在输入过程中不会改变高度，用于包含字母、数字或符号任意组合的简单自由格式数据。

输入超过字段宽度的文本时，可以向左和向右滚动浏览内容。

✅ 何时使用

1.当只需要一行文本时。 2.当从预先确定的列表中选择一个选项时，是不可能的。 3.当有足够的数据输入空间并且不需要更复杂的输入接口时。

🚫 何时不使用

1.当只能从预定义列表中输入参数时，因为这可能会导致错误。为此，可以考虑使用具有特定值选项的其他组件，例如 “选择”、“单选按钮”、“单选按钮” 和 “复选框”。 2.当必须输入大量字符（超过 5 个单词）时。为此，我们建议使用 TextArea ，一个用于多行文本输入的组件。

§类型

TextInput 有两种类型：Nor mal 和 C lear ，它们具有相同的功能集，但外观和使用方式因上下文而异。

正常

• 最常用的类型。
• 该组件的一个显著特征是其内部边距和圆角半径。这些参数由元素的大小和 1px 的笔触决定。
• 在组件之间需要自由空间时在表单中使用，例如表单元素之间的填充。

清除

• 该组件的决定性特征是没有边框，元素位于输入字段的边界内。
• 当 “正常” 类型产生视觉噪点时使用。
• 使用此类型时，请确保用户清楚该组件的用途。

§结构

1.左边的图标

• 是可选组件。
• 该图标可用于其他字段识别。
• 例如，如果这是一个搜索字符串，则可以使用 “放大镜” 图标。或者，如果这是密码输入字段，则为 “密钥” 图标。

2.行内标签。

• 是可选组件。
• 放大字段名称的值。
• 替换外部标签。
• 用作字段名称，因为当输入值时，提示会消失，使用户不清楚该字段的用途。

3.价值

• 是必需的元素。
• 用于存放提示文本和输入文本的空间。
• 输入一个字符后，输入的文本将取代提示。

4.“清除” 按钮

• 是可选组件。
• 在需要删除字段内容时使用。
• 在字段中输入至少一个字符时显示。
• 即使焦点在场外也能显示。
• 是一个 Flat-secondary 类型的按钮组件，它继承了其所有属性。例如，悬停时会填充十字架的背景。
• 单击 “清除” 按钮时，焦点会转移到该字段，输入的值将被删除。

5.嵌入式按钮

• 是可选元素，嵌入在右侧。
• 用于更清楚地表明内容和操作之间的关系，可以放置在组件中。
• 该字段最多允许两个按钮组件。
• 嵌入式按钮的大小应比组件自身的大小小一号。例如，如果使用尺寸 S，则按钮应为 XS；如果使用尺寸 M，则按钮应为 S；依此类推。
• 例如，它可用于确认操作、发送消息或向字段添加其他过滤器。

6.其他内容

• 是可选元素，嵌入在右侧。
• 在内部需要其他文字时使用。
• 文本向右对齐。
• 例如，可用作计数器（输入字符的计数器），用于计算搜索字符串中找到的值的数量或度量单位。

7.错误图标

• 仅在 “行内错误” 状态下显示。
• 与 Tooltip 配合使用，将鼠标悬停在图标上时提供错误描述，以实现表单的紧凑布局。

8.错误描述

• 仅在 “大纲错误” 状态下显示。
• 嵌入在左下角。

§国家

具有以下状态：建议、默认、悬停、活动、禁用、行内错误和大纲错误。

1.建议。 当与组件没有直接交互且未输入任何数据时，处于非活动状态。在这种状态下，该值可以用作提示，向用户指示应在该字段中输入什么样的信息。 2.默认。 当与组件没有直接交互并且已经输入数据时，处于非活动状态。在此状态下，提示值根据用户的输入而变化。 3.徘徊。 光标悬停在组件区域上方时的活动状态。 4.活跃。 活动状态，通过从前一个组件转换或通过单击光标来触发。过渡到其他组件或在空白区域上单击光标时，状态会重置。 5.已禁用。 无法与组件交互时组件处于非活动状态。 6.大纲错误。 验证期间发生错误时组件的活动状态，显示在字段底部并附有说明。 7.行内错误。 出现字段验证错误但未显示错误时组件的活动状态。相反，错误由一个特殊图标表示，当鼠标悬停在上方时，会显示错误工具提示。

§尺码

该组件有四种尺寸：S、M、L 和 XL。

字段的高度和圆角半径，以及字段内部的边距和文本的大小因组件的大小而异。

圆角半径取决于大小，由 变量设置。

1.S (-g-border-radius-s: 5px;) — 当标准输入过大（例如桌子、小牌）时使用。 2.M (-g-border-radius-m: 6px;) — 基本尺寸，用于大多数表单和过滤器。 3.L (-g-border-radius-l: 8px;) — 用于搜索（例如服务搜索）。 4.L (-g-border-radius-xl: 10px;) — 用于通信环境（例如网站和登录页面）。

§用户指南

1.在实地工作

• 该字段只能包含一行。为此，我们建议使用 TextArea ，一个用于多行文本输入的组件。
• 我们不建议在字段 中包含 提示，因为字段名称在输入值时将不可见，除非空间有限或用户明确该字段的用途。
• 字段的宽度 必须与输入值的宽度相同。它告知用户预期的输入。
• 表单的所有互补组件使用 相同的大小。如果选择尺寸 M，则所有其他组件的大小应相同。

2.外部字段标题

• 简短的字段名称，最好限于一行。
• 在桌面表单中，组件的放置位置应与字段的值一致。如果上下文是移动设备或对话框大小为 S，则组件的标题显示在组件的顶部。

3.使用工具提示进行提示

• 将鼠标悬停在带有问号的图标上时填写字段的说明。
• 在应澄清标题时使用。
• 不应包含超过两段的案文。

4.其他描述

• 可以在字段的底部或右侧找到。
• 在极少数情况下，当不清楚如何填写没有附加描述的字段时，或者需要对先前输入的值进行解释时使用。

5.计量单位 可以按如下方式放置：

• 在字段的文本描述中，如果表单中有足够的空间。
• 在输入字段中，如果必须缩短描述。
• 如果字段内的其他元素（例如按钮或清除（重置）图标）需要空间，则在字段的右侧。