Combobox
Searchable dropdown with type-ahead filtering and model binding.
<rhx-combobox>
Examples
Basic
New York
Los Angeles
Chicago
Houston
Phoenix
<rhx-combobox rhx-label="City" name="city"
rhx-placeholder="Search cities..."
rhx-items="Model.Cities" />
Enum Binding
Low Priority
Medium Priority
High Priority
Critical
<rhx-combobox rhx-label="Priority" name="cbo-priority"
rhx-placeholder="Search priorities..."
rhx-for="SelectedPriority" />
Filled
United States
Canada
United Kingdom
Germany
France
Japan
Australia
Antarctica
<rhx-combobox rhx-label="Country" name="cbo-filled"
rhx-filled="true"
rhx-placeholder="Search countries..."
rhx-items="Model.Countries" />
Child Options
Apple
Banana
Cherry
Grape
Mango
<rhx-combobox rhx-label="Fruit" name="fruit"
rhx-placeholder="Search fruits...">
<rhx-option value="apple">Apple</rhx-option>
<rhx-option value="banana">Banana</rhx-option>
<rhx-option value="cherry">Cherry</rhx-option>
<rhx-option value="grape">Grape</rhx-option>
<rhx-option value="mango">Mango</rhx-option>
</rhx-combobox>
Sizes
New York
Los Angeles
Chicago
Houston
Phoenix
New York
Los Angeles
Chicago
Houston
Phoenix
New York
Los Angeles
Chicago
Houston
Phoenix
<rhx-combobox rhx-label="Small" rhx-size="small"
rhx-placeholder="Small" rhx-items="Model.Cities" name="cbo-sm" />
<rhx-combobox rhx-label="Medium (default)"
rhx-placeholder="Medium" rhx-items="Model.Cities" name="cbo-md" />
<rhx-combobox rhx-label="Large" rhx-size="large"
rhx-placeholder="Large" rhx-items="Model.Cities" name="cbo-lg" />
States
New York
Los Angeles
Chicago
Houston
Phoenix
New York
Los Angeles
Chicago
Houston
Phoenix
<rhx-combobox rhx-label="Disabled" name="cbo-dis"
value="NYC" rhx-disabled="true"
rhx-items="Model.Cities" />
<rhx-combobox rhx-label="Readonly" name="cbo-ro"
value="NYC" rhx-readonly="true"
rhx-items="Model.Cities" />
htmx Integration
<rhx-combobox rhx-label="Search Users" name="userId"
rhx-placeholder="Type a name..."
rhx-server-filter="true"
hx-get="/Docs/Components/Combobox?handler=SearchUsers"
hx-trigger="input changed delay:300ms"
hx-target="next .rhx-combobox__listbox" />
Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-for |
ModelExpression |
- |
ASP.NET Core model expression for two-way binding |
name |
string |
- |
The form field name |
value |
string |
- |
The current value |
rhx-label |
string |
- |
Label text displayed above the combobox |
rhx-hint |
string |
- |
Hint text displayed below the combobox |
rhx-size |
string |
medium |
Combobox size: small, medium, large |
rhx-disabled |
bool |
false |
Whether the combobox is disabled |
rhx-readonly |
bool |
false |
Whether the combobox is read-only |
rhx-placeholder |
string |
- |
Placeholder text |
rhx-items |
List<SelectListItem> |
- |
Server-side items to render as options |
rhx-filled |
bool |
false |
Use filled appearance |
rhx-server-filter |
bool |
false |
Filter options server-side via htmx instead of client-side JS |
rhx-search-param |
string |
q |
Query parameter name for the search text when server filtering is enabled |
Accessibility
- Uses
role="combobox"witharia-expandedandaria-autocomplete. - Listbox options use
role="option"witharia-selected. - Keyboard navigation: arrow keys, Enter to select, Escape to close.
- Active descendant tracked via
aria-activedescendant.