跳到主要内容
Termlib

UI 组件 · 表单输入

下拉选择

Select

也叫：下拉框、下拉列表、选择器、Dropdown、Combobox

点击后展开选项列表，从中选一项或多项，收起时只占一个输入框的位置，适合选项较多的情况。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

「所在城市」用下拉选择，收起时显示占位提示「请选择城市」，右侧有向下箭头。点开后在下方弹出最多 8 行高的选项列表，超出可滚动，顶部带搜索框可输入过滤，当前选中项高亮并带对勾，选中后自动收起并显示城市名。

发给

01判断

你的内容是这样吗？

对照两列，确认下拉选择是不是你要找的。

符合这些情况，用下拉选择

  • 选项在 6 个以上、平铺出来太占地方，比如城市、国家、部门
  • 表单空间有限，需要用一个框的位置收纳一组固定选项
  • 选项很多、需要边输入边过滤，比如从上百个员工里选负责人

是这些情况，换成别的

  • 选项只有 2~5 个、希望用户一眼看到全部选项时

    改用单选框

  • 点了之后要立即执行操作而不是选一个值，比如导出、删除

    改用下拉菜单

  • 只有开和关两种状态时

    改用开关

  • 选项有省、市、区这样的层级关系时

    改用级联选择

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    只有「男 / 女」两个选项也做成下拉，多点一次还看不到全部选项

  2. 02

    几百个选项的长列表不带搜索，用户只能慢慢滚动去找

  3. 03

    把编辑、删除、导出这类操作做成下拉选择，选完还要再点确定

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由显示当前值的选择框、右侧下拉箭头和点击后弹出的选项列表组成，列表顶部可以带搜索框。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1像输入框的矩形，右侧有向下的小箭头
  2. 2展开时下方出现带阴影的浮层列表，当前项高亮或带对勾
  3. 3多选时框内是一个个带 × 的小标签

04解释

详细解释

下拉选择收起时像一个输入框，右侧有向下的小箭头，显示当前选中的值；点开后弹出选项列表，选中后自动收起。选项很多时可以加搜索过滤，也可以开启多选，选中的值以带 × 的小标签排在框里。

它常和 下拉菜单 搞混：下拉选择是表单控件，用来「选一个值」并保存下来；下拉菜单是一组操作命令，点了立即执行，比如编辑、删除、导出。和 单选框 相比，下拉选择把选项藏起来，省空间但要多点一下，选项只有 2~5 个时，平铺的单选框更直观。选项有省、市、区这样的层级时，用 级联选择。

开发者信息
术语 ID
component-select
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • select
  • [role="combobox"]:not(input)
  • .ant-select
  • .el-select
  • [class*="MuiSelect-select"]
  • .arco-select
  • .t-select
  • .n-select
  • [data-slot="select-trigger"]
  • .form-select
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • select
  • selector
  • combobox
  • dropdown-select
  • select-box
  • select-trigger
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Select
  • Combobox
  • NativeSelect
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30