SelectDialog

An enterprise-level dialog selector component based on BrConfigProvider with global theme configuration, supporting search, pagination, and batch selection. Seamlessly integrates with BrFormItem. Suitable for complex form scenarios that require displaying and selecting large amounts of data within a limited space.

Features

• 🔍 Built-in Search: Local search out of the box, with support for remote search and debouncing.
• 📦 Grouped & Disabled Options: Rich option structure supporting grouping, descriptions, badges, and disabled states.
• ✅ Single & Multiple Selection: Switch between single and multiple selection modes effortlessly, with optional max selection limits.
• 🎨 Theming: Deeply integrates with BrConfigProvider for custom colors and border radii.
• 📝 Form Integration: Works seamlessly with BrFormItem for validation and state management.

Basic Usage

The most basic usage. Click the trigger to open the dialog for single selection.

Example

Multiple Selection with Limits

Enable multiple selection mode by setting mode="multiple". You can also limit the maximum number of selected items using maxSelection.

Example

Position

The dialog can be positioned at different locations on the screen using the position prop on BrSelectDialogContent.

Example

Remote Search

Enable remoteSearch and listen to the @search event to fetch data remotely. The component comes with built-in debounce functionality.

Example

Form & Theme Integration

Seamlessly inherits validation states from BrFormItem and allows theme customization via BrConfigProvider.

Example

API

BrSelectDialog Props

Name	Type	Default	Description
modelValue / v-model	string | number | (string | number)[]	-	The bound value of the select dialog
options	SelectDialogOption[]	[]	The options data
mode	'single' | 'multiple'	'single'	Selection mode
size	'sm' | 'md' | 'lg' | 'full'	'md'	Size of the dialog and trigger
position	'center' | 'top' | 'bottom' | 'left' | 'right'	'center'	Position of the dialog
title	string	-	Dialog title
description	string	-	Dialog description
searchable	boolean	true	Whether to show the search input
remoteSearch	boolean	false	Whether to use remote search
searchDebounce	number	300	Search debounce delay (in milliseconds)
maxSelection	number	-	Maximum number of selectable items in multiple mode
loading	boolean	false	Whether the component is in a loading state
disabled	boolean	false	Whether the component is disabled

BrSelectDialog Emits

Event Name	Callback Parameters	Description
update:modelValue	(value: any) => void	Emitted when the selected value changes
change	(value: any) => void	Emitted when the selection is confirmed
search	(query: string) => void	Emitted when the search query changes
confirm	(value: any) => void	Emitted when the confirm button is clicked
cancel	() => void	Emitted when the cancel button is clicked

Theme Customization Rules

Using BrConfigProvider, you can easily override internal TailwindCSS variables:

• --primary: Background and icon color when an option is selected.
• --border: Dialog border and search input bottom border color.
• --radius: Border radius for the dialog and trigger button.
• --destructive: Border and focus ring color for form validation errors triggered by BrFormItem.

You can also use standard Tailwind classes (e.g., class="!border-blue-500") for specific component overrides.