用途:在 shadcn/ui 应用中挑选正确的“选择器”原语。四种控件表面相似但不可互换,选错会导致可预测的 UX 故障(下拉冻结、表单状态被吞、焦点丢失、移动端滚动陷阱、缺失无障碍名称)。本技能提供决策树。
四种选择器:Native <select>,浏览器内置元素,shadcn 只提供薄样式包装,语义不变;shadcn Select,Radix Select 加 shadcn 主题,10 个原语组合,底层是受控状态模式;Combobox,属于“配方”而非单一原语,由 Popover + Command 手工组合,或使用 2026 年专用 Combobox 原语(ComboboxInput / ComboboxContent / ComboboxList / ComboboxItem / ComboboxEmpty 等);Command palette,复用 Command 原语,但包在 <CommandDialog> 内并由全局快捷键(Cmd+K / Ctrl+K)触发,用于全应用动作启动,而非表单字段取值。
决策树:列表短(不超过约 10 项)、静态、可接受系统原生移动端选择器,选 Native select,用 register("field") 绑定;列表中等(约 5 至 30 项)、无需搜索,选 shadcn Select,用 Controller render-prop 绑定;需搜索、可能异步/服务端加载或超过 30 项,选 Combobox;若用户是调用动作而非取值、由全局快捷键触发且跨整个应用,选 <CommandDialog> 命令面板,它不是表单输入。
五条不变量:用 shadcn Select 或 Combobox 绑表单时始终用 Controller,绝不 register;始终在 SelectTrigger 内渲染 SelectValue 并带 placeholder;Combobox 外层 Popover 始终传 modal={true};命令面板始终用 <CommandDialog> 而非裸 <Command>;异步 Combobox 始终呈现加载、空、错误三种状态。
选择器要点:Native select 单元素,浏览器处理无障碍与键盘导航,样式扩展有限。shadcn Select 含 Select、SelectTrigger、SelectValue、SelectContent、SelectGroup、SelectLabel、SelectItem、SelectSeparator、SelectScrollUpButton、SelectScrollDownButton;SelectItem 的 value 必填且不可为空字符串;position 可选 item-aligned(默认)或 popper。Combobox 需手动为触发按钮加 aria-expanded 与 aria-controls,cmdk 内部处理 aria-activedescendant。命令面板由 CommandDialog 免费提供 Portal、Overlay、焦点陷阱与必需的 DialogTitle;裸 Command 无这些能力。
限制:资料未提供具体收费、价格或平台信息;未提供所列缺失事实,均暂未提供。