Combobox
Searchable single-select. Generic over TItem with keyboard nav (↑↓ Enter Esc), click-outside via overlay, sync filter or async loader.
Simple — string list
Type-to-filter on a static list
Pass a string array, optionally a custom DisplayFunc — nothing else.
- Australia
- Austria
- Belgium
- Brazil
- Canada
- China
- Denmark
- Egypt
- Finland
- France
- Germany
- Greece
- India
- Indonesia
- Ireland
- Italy
- Japan
- Mexico
- Netherlands
- New Zealand
- Norway
- Poland
- Portugal
- Singapore
- South Korea
- Spain
- Sweden
- Switzerland
- Thailand
- Turkey
- United Kingdom
- United States
- Vietnam
Selected: —
razor
<Combobox TItem="string"
Items="_countries"
Value="_selectedCountry"
ValueChanged="@((string? v) => _selectedCountry = v)"
DisplayFunc="@(c => c)"
Label="Country"
Placeholder="Search countries..." />Custom item template
Two-line option with rich content
Pass an <ItemTemplate> to render anything you like inside each row.
- Aiko Tanaka aiko.t@example.com
- Ben Carter ben.c@example.com
- Camila Rivera cam@example.com
- Diego Costa diego.c@example.com
- Eshe Okonkwo eshe.o@example.com
- Farid Ahmed farid.a@example.com
- Greta Voss greta@example.com
- Hiroshi Sato h.sato@example.com
razor
<Combobox TItem="Person"
Items="_people"
Value="_selectedPerson"
ValueChanged="@((Person? p) => _selectedPerson = p)"
DisplayFunc="@(p => p.Name)"
KeyFunc="@(p => p.Id)"
SearchFunc="@((p, q) => p.Name.Contains(q, StringComparison.OrdinalIgnoreCase) || p.Email.Contains(q, StringComparison.OrdinalIgnoreCase))"
Label="Assignee"
Placeholder="Search by name or email...">
<ItemTemplate Context="person">
<div style="display: flex; flex-direction: column; gap: 2px;">
<span class="text-sm-medium">@person.Name</span>
<span class="text-xs-regular" style="color: var(--text-tertiary);">@person.Email</span>
</div>
</ItemTemplate>
</Combobox>Async loader
Debounced (500ms simulated network)
Pass an ItemsLoader to fetch on each keystroke; previous in-flight requests are cancelled automatically.
- No cities matched. Try 'lon', 'tok', 'new'...
Selected: —
razor
<Combobox TItem="string"
Value="_selected"
ValueChanged="@((string? v) => _selected = v)"
DisplayFunc="@(s => s)"
ItemsLoader="LoadCitiesAsync"
Label="City (async)"
Placeholder="Type to search cities..." />
@code {
private async Task<IEnumerable<string>> LoadCitiesAsync(string query, CancellationToken ct)
{
var results = await ApiClient.SearchCities(query, ct);
return results;
}
}