Select

Dropdown select with single/multiple value, search, and async data.

Introduction

Select is a custom dropdown built on FormField and Menu—not a native <select> element.

Use Select when you need searchable options, multiple selection, async data, clearable values, or rich option rendering. Use a native <select> when you prefer the platform’s built-in picker (especially on mobile), need maximum simplicity for short static lists, or must submit unmodified HTML form values without JavaScript.

The options list uses bridge-soft-scrollbar. See Scroll utilities.

Import

import { Select } from "@bridge-ui/vue/Components/Select";

import { Select } from "@bridge-ui/react/Components/Select";

Basic usage

Pass an options array of objects with label and value keys (customizable via optionLabel and optionValue). For an initial value without binding, use defaultValue in React or default-value in Vue.

Sizes

Control the select size with the size prop. Available sizes: 2xs, xs, sm, md (default), lg, xl, and 2xl.

Rounded

Use the rounded prop to control border radius on both the field and the listbox dropdown panel. Available values: none, xs, sm, md (default), lg, xl, 2xl, 3xl, 4xl, and full.

Multiple

Enable multiple to allow selecting more than one option. Combine with searchable to filter the list.

Searchable

Set searchable to filter options as the user types. Search UI appears automatically when the option count exceeds minItemsForSearch (default 11).

Declarative options

Use SelectOption children (Vue) or the options prop (React) when options are static and defined in markup.

Grouped options

The options prop may mix standalone options and section groups ({ title, options, sticky? }). Search filters within sections and drops empty ones.

Composed list children

Pass ListSection / ListItem as children to build the dropdown list manually. Set value on each ListItem so it registers as a selectable option. A string primary is shown on the closed trigger and wins over options labels for the same value. Composed items and sections inherit the Select size token. When composed children are present, mapped options are not rendered in the listbox.

Async data

Pass asyncData with search and resolve callbacks for remote or debounced option lists. Implies searchable. While a search or resolve is in flight, the dropdown shows an indeterminate progress bar and loadingMessage (default "Loading..."). You can also drive loading yourself with the loading prop, or replace the message with the loading slot.

For Laravel backends, see Laravel + Inertia.

Overlay

Use the overlay prop to choose the picker shell: auto (default), menu, modal, or drawer. auto uses menu on desktop and a bottom drawer on mobile. When unset, showFooter defaults to true for modal / drawer overlays (false for menu). Apply commits and closes; Cancel discards and closes. Cancel / Apply follow the field color; theme their variants once through components.ActionFooter.defaultProps — see Default props.

Custom footer

A custom footer slot replaces Cancel / Apply on the nested listbox. Call apply() to commit the draft and close, or cancel() to discard and close.

Validation

Set error and errorMessage to show invalid styling and an error message below the field.

Nested customProps

Use customProps.listbox to forward props to the internal Listbox (including nested customProps for Menu, Progress, List, etc.). Owned Select props such as value and options are not overridable through nested customProps.

<Select
  options={options}
  customProps={{
    label: { id: "country-label" },
    listbox: {
      customProps: {
        menu: { rounded: "xl" },
        progress: { size: "sm" },
      },
    },
  }}
/>

Match field width

Set customProps.listbox.matchWidth so the menu panel matches the field. Only applies when the overlay resolves to menu.

<Select
  label="Country"
  :options="countries"
  :custom-props="{
    listbox: { matchWidth: true },
  }"
/>

<Select
  label="Country"
  options={countries}
  customProps={{
    listbox: { matchWidth: true },
  }}
/>

To apply this to every Select / Autocomplete menu, set components.Listbox.defaultProps.matchWidth — see Default props.

Related components

Menu, List

Accessibility

Select requires an accessible name from its label (linked via controlId) or an explicit aria-label on the trigger.

• Helper and error text are linked through aria-describedby.
• When error is true, the trigger receives aria-invalid="true".
• The dropdown list uses listbox semantics; keyboard navigation follows WAI-ARIA combobox patterns when searchable is enabled.

Anatomy

Select composes FormField, a trigger (with chips in multiple mode), and an overlay-based options panel (auto by default: menu on desktop, bottom drawer on mobile):

FormField (root)
├── Header — label, optional corner text, required indicator
├── Container — variant shell
│   └── Trigger — input / chips showing the current selection
├── Options panel — selectable items (supports search, loading, and multiple selection)
└── Footer — description or error message

API

Select-specific

Events

Slots

Inherited from FormField