Combobox

A basic Combobox with search filtering for selecting a single item. Use @bind-Value for two-way binding and provide Options with a collection of SelectOption<TValue> items for data-driven mode.

A Combobox that displays the currently selected value below the input for confirmation. Clicking a selected item again deselects it (toggle behavior). This is useful when the selection drives other UI changes and users need immediate confirmation of their choice.

Use ChildContent with ComboboxItem children for custom rendering. Each item specifies a Value and Text for search filtering. This mode is ideal when you need custom item templates or dynamic content per option. If you pre-select a value in compositional mode, set SelectedItemText so the trigger can display the correct text before the items have rendered.

A Combobox used inside a form layout with a Label and helper text. Pair with a Button for a complete form experience. The combobox provides a searchable alternative to a standard select when the options list is long or when users benefit from filtering.

Set MatchTriggerWidth to true to make the dropdown match the width of the trigger button. When enabled, the PopoverWidth parameter is ignored. This is useful in form layouts where the combobox should span the full width of its container.

Use SearchQuery with SearchQueryChanged to enable external/server-side filtering. When SearchQueryChanged has a delegate, the built-in text filter is bypassed so the component renders exactly what you provide in Options. This example simulates an async search with a 200ms delay.

Set Disabled to true to prevent all user interaction. The trigger button becomes non-clickable with reduced opacity and pointer-events-none styling. This is useful for read-only states or when a dependent field must be filled first.

Use the Class parameter to apply custom Tailwind classes to the trigger button. Override the border radius, background, shadow, or add visual effects to match your design system. The dropdown panel uses the default popover styling.

A real-world project setup form combining Combobox with Input components inside a Card. This demonstrates how a searchable combobox integrates into complete form layouts for scenarios like project configuration or settings pages.

Use BbComboboxGroup in compositional mode to organize items under labeled sections. Groups automatically hide when search filters out all their items. Customize the label styling with LabelClass.

Use OnLoadMore, IsLoading, and EndOfListMessage to load large option sets in batches as the user scrolls the dropdown. This example uses Options mode with a country list.

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