安装
pnpm dlx shadcn@latest add https://yiui.dev/r/bar-select.json会连带安装 shadcn 组件 combobox、input-group、sheet、button。已存在的文件会询问是否覆盖。
用法
import { BarSelect } from "@/components/ui/bar-select/bar-select"
;<BarSelect label="负责人" options={[{ value: "lin", label: "林小满" }]} />选项超过 8 项时自动显示搜索，也可以通过 searchable 强制开关。复杂 label 请提供 textValue 以供搜索。无 label 时必须传入 aria-label。
放进网格工具栏
放进网格工具栏时会自动去掉外框、圆角和底色，铺满整格，焦点环画在格子内侧；单独使用时不受影响。
示例
多选、计数与分组
multiple 开启多选，默认显示首项与额外数量；display="summary" 显示总数。count 为零的选项变灰，但仍能选择；只有 disabled 会禁用选项。
标签与表单
display="chips" 逐项展示，支持移除。传入 name 后用隐藏输入提交，多选时每个值对应一个输入；form 可关联外部表单。
尺寸
API
可选项
类型BarSelectOption[]可见标签；省略时必须提供 aria-label
类型React.ReactNode空值占位
类型string | undefined搜索开关；默认超过 8 项开启
类型boolean | undefined显示清除
类型boolean | undefinedtrue高度档
类型"default" | "lg" | "sm" | undefined"default"类型
React.ReactNode类型
React.ReactNode类型
string | undefined类型
string | undefined类型
boolean | undefined类型
Partial<BarSelectLabels> | undefined弹层（含触屏底部面板）的额外类名，例如在紧凑工具栏里统一缩小字号
类型string | undefined类型
boolean | undefined类型
string | string[] | null | undefined类型
string | string[] | null | undefined类型
((value: string | null) => void) | ((value: string[]) => void) | undefined导出 BarSelectProps、BarSelectOption、BarSelectLabels 类型及 barSelectVariants。labels 可覆盖清除、搜索、无匹配结果、已选数量、移除和完成文案。根节点为 data-slot="bar-select"，触发条为 bar-select-control。
可访问性
列表导航、选中状态与键盘操作交给 Base UI Combobox。单选选中即关闭，多选保持打开并清空搜索。清除与移除按钮有独立名称。error、description 通过 aria-describedby 关联。触屏使用底部 Sheet，并提供清除与完成按钮。窄容器标签移到上方。