Combobox

A searchable select component that combines autocomplete with a dropdown interface.

Basic Combobox

Select a framework from the searchable list. Click to deselect.

Programming Language

Wider combobox with programming languages.

Country Selector

Large dataset with search functionality.

Match Trigger Width

With MatchTriggerWidth='true', the dropdown automatically matches the width of the trigger element.

Fixed width container (w-64)

Wider container (w-96)

Disabled State

Combobox in disabled state.

Form Integration

Example of comboboxes in a form layout.

Framework

Choose your preferred framework.

Language

Choose your primary language.

Async Filtering

Use SearchQueryChanged to bypass the built-in filter and run a server-side or async search on every keystroke.

7 / 7 matches

The search input fires SearchQueryChanged on every keystroke. A 300 ms simulated delay mimics a server round-trip. Because SearchQueryChanged has a delegate, the component's built-in text filter is completely bypassed — the consumer decides what Items to show. On close, the callback fires with an empty string so the consumer can reload the default list.

Infinite Scroll

Load items in batches as the user scrolls to the bottom of the list.

10 / 50 items loaded

Open the dropdown and scroll to the bottom to trigger OnLoadMore. A spinner appears during the simulated 600 ms fetch. Once all 50 items are loaded, EndOfListMessage is shown in place of the spinner.

API Reference

Component parameters and their types.

Prop	Type	Default	Description
Items	IEnumerable<TItem>	—	The data source for the dropdown options.
Value	string?	—	The selected item's value. Supports two-way binding with @bind-Value.
ValueSelector	Func<TItem, string>	—	Function to extract the string value from an item.
DisplaySelector	Func<TItem, string>	—	Function to extract the display label from an item.
Placeholder	string?	—	Text shown on the trigger button when nothing is selected.
SearchPlaceholder	string?	—	Placeholder text in the search input.
EmptyMessage	string?	—	Message shown when the search returns no results.
OnLoadMore	EventCallback	—	Invoked when the user scrolls near the bottom of the list. Use to load additional items.
IsLoading	bool	false	Shows a spinner at the bottom of the list while the next batch is loading.
EndOfListMessage	string?	—	Message shown at the bottom when all items have been loaded. Hidden when null or empty.
SearchQueryChanged	EventCallback<string>	—	Invoked on every search keystroke. When set, bypasses the built-in text filter — the consumer controls Items.
Disabled	bool	false	When true, the combobox cannot be opened.
MatchTriggerWidth	bool	false	When true, the dropdown width matches the trigger width.
PopoverWidth	string?	—	Tailwind CSS width class for the dropdown (e.g. w-[200px]).
Class	string?	—	Additional CSS classes for the trigger button.

Previous Color Picker Next Command