Dropdown menu 下拉菜单
/DROP-down MEN-yoo/ · noun · 输入类模式 · #072
收起时只显示当前选项、点开才列出其余选项的框。选项多时省地方；选项只有几个时，反而白白把它们藏了起来。
别名：下拉框、下拉列表、下拉选择框、组合框、可搜索下拉框。
你可能会这样叫它
- “点开选一项的框”
- “带小箭头的选择框”
- “下拉选择”
- “点一下展开的列表”
- “下拉选项”
……它的名字是 下拉菜单（Dropdown menu）。
常见问题
下拉框是什么？
下拉框（下拉菜单）是收起时只显示当前选项、点开才列出全部选项的控件，网页里对应 <select> 元素。如果还能输入文字筛选选项，就叫组合框（combobox）。
下拉框和列表框有什么区别？
列表框把选项直接摊开显示在一个固定高度的框里；下拉框平时收起，只显示当前选中的一项，点开才展开。空间紧、选项多时用下拉框；希望一眼看到全部选项时，用列表框或单选组。
组合框和下拉框的区别是什么？
下拉框（网页里的 <select>）只能从列表里选；组合框（combobox）在它上面加了一个能打字的输入框：输入几个字，列表就只剩匹配的选项，也就是常说的“可搜索下拉框”，有的还允许填列表里没有的值。选项很多时（国家、城市）用组合框，选项不多时普通下拉框就够了。
代码里叫什么
| SwiftUI | Picker .pickerStyle(.menu) |
|---|---|
| UIKit | UIButton.menu changesSelectionAsPrimaryAction |
| Jetpack Compose | ExposedDropdownMenuBox DropdownMenuItem |
| Android (Views) | Spinner MaterialAutoCompleteTextView |
| Flutter | DropdownMenu DropdownButton |
| Web (HTML / ARIA) | <select> <option> role="combobox" <datalist> |
| React (MUI) | Select Autocomplete Autocomplete 是可搜索的那种 |
复制给 AI 编程工具
加一个用来选一项的下拉菜单：一个带标签的框，显示当前选项和一个向下箭头，点开后在下方列出所有选项；选中一项就收起列表并更新框里的值。没有特殊样式需求就用原生 <select>；自己实现时要遵循 ARIA 的 combobox / listbox 模式：方向键移动、回车选中、Esc 关闭，并播报选中的项。选项只有五个或更少时，改用单选组。