Select

Displays a list of options for the user to pick from—triggered by a button. Replicates the core capabilities of the shadcn-vue Select component, supporting single selection, multiple selection, search, grouping, and other functions. Based on BrConfigProvider for global theme configuration.

Basic

The most basic single selection mode, supports custom placeholder.

Selected: apple

Example

Grouping

Display options in groups using the group field.

Example

Remote Search

Enable the filterable prop and listen to the search event to implement remote search. Supports loading state.

Current Value:

Example

Multiple Selection & Clearable

Enable the multiple prop to support multiple selection, and clearable for one-click clearing.

React

Vue

Selected: [ "react", "vue" ]

Example

Size

Supports default, sm, lg sizes.

Extra Small Size (xs)

Small Size (sm)

Default Size

Medium Size (md)

Large Size (lg)

Extra Large Size (xl)

2X Large Size (2xl)

Example

Status

Supports error state.

Error State

Example

Theming

The BrSelect component fully follows the theme specifications of BrConfigProvider.

Global Configuration & Local Override

• Global Configuration: Configure global colors via the theme prop of BrConfigProvider, and the Select component will automatically adapt.
• Local Override: You can use Tailwind CSS class names to directly override styles.

Default Theme

Custom Dark Theme (via ConfigProvider)

Example

API

Props

Prop	Type	Default	Description
modelValue	string | number | (string | number)[]	-	Binding value
options	(string | number | SelectOption)[]	[]	Options data
placeholder	string	'Select an option'	Placeholder
disabled	boolean	false	Whether disabled
clearable	boolean	false	Whether clearable
filterable	boolean	false	Whether searchable
multiple	boolean	false	Whether multiple selection
loading	boolean	false	Whether loading (for remote search)
emptyText	string	'No options found.'	Text to display when no options are found
size	'default' | 'sm' | 'lg'	'default'	Size
error	boolean	false	Whether error state

SelectOption Type

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

Events

Name	Description	Payload
update:modelValue	Emitted when binding value changes	value: string | number | (string | number)[]
change	Emitted when selected value changes	value: string | number | (string | number)[]
clear	Emitted when clear button is clicked	-
search	Emitted when search input changes	query: string