Select

A basic Select with a list of SelectItem options. Uses @bind-Value for two-way binding of the selected value. The trigger displays a placeholder until a selection is made.

Use the Options parameter with a collection of SelectOption<TValue> to auto-generate the select UI without manually composing sub-components. Set Placeholder directly on the Select component. This mode takes priority over ChildContent and is ideal for simple data-driven selects.

Pair a Select with an associated Label component. Set the id attribute on SelectTrigger and match it with the For parameter on Label for proper accessibility and click-to-focus behavior.

Organize options into logical sections using SelectGroup and SelectLabel. Each group displays a bold label header followed by its items, making long option lists easier to scan and navigate.

Set Disabled="true" on the Select component to prevent all user interaction. The trigger button becomes non-clickable, visually faded, and the dropdown cannot be opened.

Individual SelectItem elements can be disabled by setting Disabled="true" on the item. Disabled items appear faded and cannot be selected, while other items in the list remain fully interactive.

Use the DisplayTextSelector parameter to derive display text directly from the selected value without waiting for dropdown items to render. This is especially useful when the Select has a pre-selected value on initial load, as it resolves the display text immediately via the provided Func<TValue, string>.

Use OnLoadMore, IsLoading, and EndOfListMessage to load large datasets in batches as the user scrolls. This example uses Options mode with a country list that loads 20 at a time.

Compositional mode with rich items showing country flag emojis. The OnLoadMore parameter on BbSelectContent triggers loading when the user scrolls near the bottom.