选择器
用于从指定列表中选择单个值或一组值的组件。当用户点击控件时，会打开一个下拉列表，其中包含用户可供选择的值集。
用途
何时使用？
- 当您希望用户从指定列表中选择值时。
何时避免使用？
选项
单选
- 用于从列表中选择单个值。
- 用户选择值后，下拉列表将关闭。
- 控件显示选定的值。
多选
- 当您希望用户从列表中选择多个值时使用。
- 在列表中，选定的值在左侧用复选标记标出。
- 控件显示用逗号分隔的选定值。
- 要关闭下拉列表并应用选定的值，用户可以点击列表外部的空白区域或列表中的确认按钮（如果提供）。
类型
该控件有两种类型：常规 (Normal) 和 清除 (Clear)，两者都具有相同的功能集，但外观不同，并且根据上下文应用。
常规 (Normal)
- 最常用的类型。
- 其独特之处在于组件有一个 1 像素的边框，内部元素（文本和箭头）与边缘有边距。
- 在需要使用边距分隔表单元素的表单中使用此组件。
清除 (Clear)
- 其独特之处在于组件没有边框，内部元素（文本和箭头）与输入字段边缘对齐。
- 当常规类型造成视觉混乱时使用它。
- 使用此类型时，请确保组件的含义对用户保持清晰。
结构
- 内部标签 (Inline label)
- 值 (Value)
- 清除图标 (Clear icon)
- 箭头 (Chevron)
- 错误图标 (Error icon)
- 错误描述 (Error description)
内部标签 (Inline label)
- 可选元素。
- 为选择字段名称添加解释。
- 它可以替代表单中的外部标签。
值 (Value)
- 必填元素。
- 默认情况下，它是一个提示，帮助用户理解可以从值列表中选择什么。
- 显示选定值或值的区域。
清除图标 (Clear icon)
- 可选元素。
- 使用它可以在不打开下拉列表的情况下快速清除组件中的选定值或选项。
- 当至少选择了一个值时，它可能会显示出来。
- 清除后，焦点仍保留在组件中。
- 鼠标悬停时颜色会改变。
箭头 (Chevron)
- 必填元素。
- 使用它来区分该组件与其他视觉上相似的组件（例如，TextInput），以便在表单中识别该组件。
- 组件可以只有箭头，例如，当需要紧凑视图时。
- 尽管有箭头，但整个组件区域都是可点击的。
错误图标 (Error icon)
- 仅在内联错误状态 (Inline Error) 下显示。
- 它与鼠标悬停时显示的错误描述工具提示 (Tooltip) 一起工作。它有助于告知用户，同时节省空间。
错误描述 (Error description)
- 仅在外联错误状态 (Outline Error) 下显示。
- 当需要立即显示错误原因时，错误描述位于字段的左下方。
状态
它有几种状态：建议 (Suggest)、默认 (Default)、悬停 (Hover)、禁用 (Disabled)、激活 (Active)、内联错误 (Inline Error)、外联错误 (Outline Error)。
- 建议 (Suggest)。 非激活状态，当用户没有直接与组件交互并且未选择任何内容时。在此状态下，它可以提示用户他们可以选择什么。
- 默认 (Default)。 非激活状态，当用户没有直接与组件交互并且已选择某些内容时。在此状态下，提示值会更改为下拉列表中的选择。
- 悬停 (Hover)。 用户将光标移到组件区域上时的激活状态。
- 禁用 (Disabled)。 组件的非激活状态，用户无法与之交互。
- 激活 (Active)。 用户点击控件时启用的激活状态。点击时会打开下拉列表。
- 外联错误 (Outline error)。 由验证错误触发的组件状态，在字段底部显示，并附有错误说明。
- 内联错误 (Inline error)。 由验证错误触发的组件状态，但错误说明不显示，仅显示一个特殊图标。当您将鼠标悬停在图标上时，会出现带有错误的工具提示。
尺寸
组件有四种尺寸：S、M、L、XL。
| Size | Height | Text style | Rounding |
|---|---|---|---|
| S | 24 | Body 1 | 5 |
| M | 28 | Body 1 | 6 |
| L | 36 | Body 1 | 8 |
| XL | 44 | Body 2 | 10 |
尺寸选择决定了控件的高度和圆角、其内边距以及文本大小。
圆角取决于尺寸，并由变量设置。
- S。 在标准控件过大的地方使用它（表格、小卡片）。
- M。 这是主要尺寸，在大多数表单和过滤器中使用。
- L。 很少使用。
- XL。 在通信环境中（例如网站和登陆页面）使用它。
使用建议
-
处理字段
- 根据内容大小选择字段宽度。例如，对于长值或多选，您可以使元素更宽。
- 在表单中使用一种尺寸与其他互补组件。如果您选择使用 M 尺寸，其他组件也应为相同尺寸。
- 使用清除图标进行多选：这更方便快捷。
- 您无法更改控件的高度。我们只提供固定字段尺寸。
-
外联标签 (Outline label)
- 简短的字段名称（不应超过一行）。
- 在表单中使用时，将其与字段内的值对齐。
-
带工具提示的提示 (Hint with a tooltip)
- 关于选择的附加提示，在鼠标悬停在问号图标上时显示。
- 当您需要解释标签时使用它。
-
描述 (Description)
- 它可以位于字段下方或字段右侧。
- 在特殊情况下使用它来对选择进行额外澄清或为选定值提供解释。