选择器Select
填写与选择从收起的固定选项中选择一个值
也常被叫作下拉选择框Select Box
当选项来自固定清单、又不适合全部摆出来时，可以使用选择器。选项很少时用单选框 Radio更直观；需要用户自由输入时，应该使用输入框或自动完成 AutoComplete。
容易混淆？这样区分
选择器Select≠下拉菜单Dropdown
选择器 Select 用来选择一个表单值；下拉菜单 Dropdown 展开的是操作或导航，例如重命名、导出和删除。
选择器Select≠自动完成AutoComplete
选择器 Select 只能从固定选项中选择；自动完成 AutoComplete 会随着输入给出建议，是否允许填写自定义内容要另外说明。
什么时候用
- 值来自一组固定选项：状态、分类、优先级全部状态全部状态进行中已完成已过期
- 选项超过 5 个：平铺放不下，收进下拉里选择城市北京上海广州深圳杭州…
- 列表页的筛选条件：几个选择器排一排，即选即筛全部状态全部分类最近更新
- 选项文案比较长：模板、文件这类带描述的选项选择模板AI 产品需求文档模板（含评审 checklist）用户调研报告模板
什么时候不用
- 只有 2~4 个选项 → 用 单选框 Radio 平铺出来一眼看全全部进行中已完成
- 要选好几个 → 用 复选框 Checkbox 或多选选择器更直观前端后端设计
- 选项有上下级：省市区、类目 → 用 级联选择器 Cascader省 / 市 / 区广东省深圳市南山区
- 允许用户输入新值 → 用 自动完成 AutoComplete 或支持创建的选择器自定义标签前端后端➕ 创建“自定义标签”
组成结构 · Anatomy
全部状态进行中全部状态✓
1触发框Trigger平时收起来的样子，显示当前选中值
2选中文案Selected Label告诉用户现在选的是什么
3下拉箭头Caret提示「点我展开」，展开时常会翻转
4下拉面板Dropdown显示所有选项的浮层，可以搜索和分组
5选项Option悬停高亮，选中项带对勾
常见变体 · Variants
基础单选Default
选项固定、只选一个时的默认形态
多选Multiple
前端后端
选项偏多又要同时选好几个时用
可搜索Searchable
🔍深圳
深圳上海
选项几十个时,打字快速定位目标
可清空Clearable
进行中✕
筛选可有可无,允许一键回到未选
禁用Disabled
全部状态
条件不满足时暂时锁住,防止误选
典型使用场景
任务状态筛选
任务列表
进行中
官网首页改版进行中
支付流程走查进行中
埋点方案评审待开始
注册时选城市
所在城市
广东 · 深圳
广东 · 深圳✓
广东 · 广州
浙江 · 杭州
切换语言 / 时区
界面语言选择界面显示的语言简体中文
时区影响日程和提醒的显示时间UTC+8 北京
报表维度切换
访问量趋势
按周
W26W27W28W29W30W31