Select 选择器

用于收纳大量选项的信息录入类组件

figma 组件

构成

标题

Select

额外提示语，文字过多时宽度折行

1: 标题

可选

2: 文案

可选，一般为选择器提示语或选择器内容，若有默认的选项可不要提示语

3: 容器

必有，用于选择器的内容

4: 后缀角标

必有，用于展示选择器的展开/收起状态

4: 辅助文案

可选，但报错时必出现

变体/类型

单选

多选

带 icon

Select

Tag1

Tag2

+2...

Select

使用场景

Select

交互

Select

Default

此时选择器属于未激活状态未与用户发生交互

Select

Hover

当光标移动到选择器上方时，描边渐出。

Select

Focus

这是用户点击了选择器还未选择的状态，描边颜色变蓝。

Select

Filled

这是用户选择完成后的状态。

Select

Disable

由于某种原因，用户无法选择。虽然字段中存在已选择的内容，但会变暗后显示。即使选择该区域，也不会获得焦点。

Select

额外提示语，文字过多时宽度折行

Error

这是用户选择的内容与条件不匹配，显示红色描边。若用户继续点击该区域，会回到 Focus的状态让用户继续选择。

标注

8px

12px

8px

标题

Select

额外提示语，文字过多时宽度折行

多语言适配

标题

Select

标题

1238947612834612839461829364182364812123123123331212312312364

缩小字号+截断

在选择器里，当内容超长时，有限缩小字号，字号最小缩小到 10px，若还超长则末尾...截断。

RTL

标题

Select

LTR

标题

Select

RTL

标题

Select

额外提示语，文字过多时宽度折行

LTR

标题

Select

额外提示语，文字过多时宽度折行

RTL

用法

标题

Select

条件失效，请重新选择

正确

标题

Select

选择错误

错误

报错文案描述需要准确

DESIGN

产品设计

品牌设计

技能库

Select Language

中文