Combobox

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

Basic Combobox

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

Wider combobox with programming languages.

Large dataset with search functionality.

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

Fixed width container (w-64)

Wider container (w-96)

Combobox in disabled state.

Example of comboboxes in a form layout.

Framework

Choose your preferred framework.

Language

Choose your primary language.

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.
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.