Select Group

An enterprise-class grouped select component built on top of Radix Vue's Combobox, supporting grouping, multiple selection, searching, and group-level select all.

Features

• 📦 Grouped Display: Supports data grouping, with collapsible capabilities.
• ✅ Multiple & Select All: Supports multiple selection mode and group-level one-click select all/deselect all.
• 🔍 Local Search: Built-in local search filtering for quick option finding.
• 📋 Form Integration: Perfectly integrates with BrForm, supporting complex validation rules like required and quantity limits.
• 🎨 Theming: Supports global theme customization via BrConfigProvider.

Basic Usage

Basic single selection with group collapsible functionality.

Example

Multiple & Select All

Supports multiple selection mode. Enable show-group-select-all to allow one-click select all/deselect all operations in the group header.

Example

Search & Filter

Enable the filterable attribute to support local search filtering for options.

Example

Form Integration

Typical application within a form, supporting data validation combined with BrForm.

Example

API Reference

BrSelectGroup

Property	Type	Default	Description
modelValue (v-model)	string | number | (string | number)[]	-	The binding value
defaultValue	string | number | (string | number)[]	-	The default value
options	SelectGroupItem[]	[]	Data source options
disabled	boolean	false	Whether the entire select is disabled
placeholder	string	'Please select'	Placeholder text
size	'sm' | 'default' | 'lg'	'default'	Component size
error	boolean	false	Whether it is in an error state
clearable	boolean	false	Whether to show a clear button
filterable	boolean	false	Whether local search filtering is enabled
multiple	boolean	false	Whether multiple selection mode is enabled
loading	boolean	false	Whether it is in a loading state
emptyText	string	'No data'	Text to display when no data matches
showGroupSelectAll	boolean	false	Whether to show the group-level select all button (valid only in multiple mode)
collapsible	boolean	false	Whether groups are allowed to collapse
zIndex	number	-	The z-index of the popover

SelectGroupItem (Options)

Property	Type	Default	Description
group	string	-	Group name
disabled	boolean	false	Whether the group is disabled
collapsible	boolean	false	Whether this group is allowed to collapse (higher priority than global config)
collapsed	boolean	false	Whether it is collapsed by default upon initialization
options	SelectGroupOptionType[]	[]	List of options within the group

SelectGroupOptionType

Property	Type	Default	Description
label	string	-	Option display text
value	string | number	-	Value binding of the option
disabled	boolean	false	Whether the option is disabled

Emits

Event Name	Callback Parameters	Description
change	(value: string | number | (string | number)[] | undefined)	Triggered when the selected option changes
clear	()	Triggered when the clear button is clicked
search	(query: string)	Triggered when the search keyword changes
group-toggle	(group: string, collapsed: boolean)	Triggered when the group collapsible state changes