组件 · 输入 · 08
选择器
选择器 = 触发器、菜单、选中项、空状态四个部分，而不是一个简单的下拉框。
直达修改 Prompt →
选择器是什么？
选择器是触发器加列表。写明箭头、选中值、菜单层级和键盘行为。
变体
点击属性即可在预览中高亮。
-
- 只能从菜单中选择一个值的下拉。
-
- 菜单内带筛选框、用于长列表的下拉。
-
- 打开菜单的触发器控件。
-
- 触发器激活后浮出的选项列表。
-
- 当前选中的值或标签，需与其余项明显区分。
-
- 表示控件可展开的小箭头。
状态
点击属性即可在预览中高亮。
-
- 输入或报错前字段的默认有效状态。
-
- 菜单、下拉或对话框展开可见时的状态。
-
- 当前选中的值或标签，需与其余项明显区分。
结构解剖
这些是 Prompt 里应该点名的部件。
- 01 触发器
- 02 箭头
- 03 菜单
- 04 选中项
什么时候用
- 从已知列表中选一个值
- 仪表盘与表格的筛选
- 设置表单：工作区、时区、角色
什么时候别用
- 选项少于 3 个——改用单选组
- 自由输入——改用输入框
- 多项多选——改用复选框
Create a select menu.
STYLE
- 12px radius trigger, 8px menu offset
COMPONENTS
- trigger, chevron, list, selected check
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui