Select 选择器

显示一个选项列表供用户选择——由按钮触发。复制了 shadcn-vue Select 组件的核心能力，支持单选、多选、搜索、分组和其他功能。基于 BrConfigProvider 进行全局主题配置。

基础用法

最基本的单选模式，支持自定义占位符。

Selected: apple

Example

分组

使用 group 字段将选项分组显示。

Example

远程搜索

启用 filterable 属性并监听 search 事件以实现远程搜索。支持 loading 状态。

Current Value:

Example

多选与可清除

启用 multiple 属性以支持多选，启用 clearable 以支持一键清除。

React

Vue

Selected: [ "react", "vue" ]

Example

尺寸

支持 default, sm, lg 尺寸。

Extra Small Size (xs)

Small Size (sm)

Default Size

Medium Size (md)

Large Size (lg)

Extra Large Size (xl)

2X Large Size (2xl)

Example

状态

支持 error 状态。

Error State

Example

主题定制

BrSelect 组件完全遵循 BrConfigProvider 的主题规范。

全局配置与局部覆盖

• 全局配置：通过 BrConfigProvider 的 theme 属性配置全局颜色，Select 组件将自动适配。
• 局部覆盖：你可以使用 Tailwind CSS 类名直接覆盖样式。

Default Theme

Custom Dark Theme (via ConfigProvider)

Example

API

Props

属性	类型	默认值	说明
modelValue	string | number | (string | number)[]	-	绑定值
options	(string | number | SelectOption)[]	[]	选项数据
placeholder	string	'Select an option'	占位符
disabled	boolean	false	是否禁用
clearable	boolean	false	是否可清除
filterable	boolean	false	是否可搜索
multiple	boolean	false	是否多选
loading	boolean	false	是否加载中（用于远程搜索）
emptyText	string	'No options found.'	当未找到选项时显示的文本
size	'default' | 'sm' | 'lg'	'default'	尺寸
error	boolean	false	是否处于错误状态

SelectOption 类型

interface SelectOption {
  label: string
  value: string | number
  disabled?: boolean
  group?: string
}

Events

名称	说明	参数
update:modelValue	当绑定值变化时触发	value: string | number | (string | number)[]
change	当选中值变化时触发	value: string | number | (string | number)[]
clear	当点击清除按钮时触发	-
search	当搜索输入变化时触发	query: string