选择器

Select

初级通用

选择器（Select）是表单里让你从预设选项中选出一个值的控件，通常收起时显示当前选择，展开后显示候选项。它能把输入限制在可处理的范围内，例如在创建项目时选择所属团队。

你可能会说：「创建项目时，我想让用户从已有团队里挑一个，不用自己输入团队名称。」

动手看看创建项目时选择所属团队

创建项目项目：春季官网改版

所属团队

请选择所属团队

请选择一个团队，项目将归入该团队。

展开候选团队

当前选择

无团队修改权限

悬停、按住选择框或用 Tab 聚焦，体验真实反馈。展开和选值由下方参数模拟：打开菜单、选择团队，再关闭菜单，观察当前值保留。

浅色的“请选择所属团队”是占位提示，不是团队名称。它告诉你这项还没填，候选值只能来自预设的三个团队。

收起后只保留当前值，表单不会一直被选项占满。真实产品里，选择一个团队通常会更新当前值并自动收起菜单。

1
候选项决定能选什么值
比如后台要按订单状态筛选，我们给出“待付款”“已发货”等选项。因为用户选的是已有值，前后端就不用猜他们输入的不同说法是不是同一个状态。
2
当前选择要在收起时可见
用户选完“已发货”后，选择器收起时仍显示它。这样用户提交表单前能核对自己的选择；如果还没选，你也能用提示文字说明这里要填什么。
3
选项很多时要考虑查找
如果团队只有几个，展开后逐项看就够了；如果有上百个团队，可以加入搜索，让用户按名称缩小范围。我们还要想清楚列表为空、选项不可用时怎么显示。

选择器和单选框都能从预设项里选一个值。选项少、需要同时看见并比较时，单选框更直接；选项较多或页面空间有限时，选择器更合适。它也不同于泛指“点开后出现内容”的下拉菜单：选择器的重点是给表单字段确定一个值，而不是提供一组操作命令。

你在做项目创建页：用户必须从已有团队中指定一个归属，团队可能有几十个。哪种设计更贴合这个需求？

请在项目创建表单中加入一个可搜索的团队选择器：候选项来自现有团队列表，显示团队名称，单次只能选一个；未选择时提示用户选择，提交时传团队标识，并处理列表为空的情况。