Select
Dropdown selection with items binding, enum support, and multi-select.
<rhx-select>
Examples
Basic
United States
Canada
United Kingdom
Germany
France
Japan
Australia
Antarctica
<rhx-select rhx-label="Country" name="country"
rhx-placeholder="Choose a country"
rhx-items="Model.Countries" />
Enum Binding
Low Priority
Medium Priority
High Priority
Critical
<rhx-select rhx-label="Priority" name="priority"
value="Medium" rhx-for="SelectedPriority" />
With Clear
United States
Canada
United Kingdom
Germany
France
Japan
Australia
Antarctica
<rhx-select rhx-label="Country" name="country-clear"
value="US" rhx-with-clear="true"
rhx-items="Model.Countries" />
Child Options
Red
Green
Blue
Purple (disabled)
<rhx-select rhx-label="Color" name="color"
rhx-placeholder="Pick a color">
<rhx-option value="red">Red</rhx-option>
<rhx-option value="green">Green</rhx-option>
<rhx-option value="blue">Blue</rhx-option>
<rhx-option value="purple" rhx-disabled="true">Purple (disabled)</rhx-option>
</rhx-select>
Multi-select
Bug
Feature
Documentation
Performance
<rhx-select rhx-label="Tags" name="tags"
rhx-multiple="true" rhx-placeholder="Select tags">
<rhx-option value="bug">Bug</rhx-option>
<rhx-option value="feature">Feature</rhx-option>
<rhx-option value="docs">Documentation</rhx-option>
<rhx-option value="perf">Performance</rhx-option>
</rhx-select>
Sizes
New York
Los Angeles
Chicago
Houston
Phoenix
New York
Los Angeles
Chicago
Houston
Phoenix
New York
Los Angeles
Chicago
Houston
Phoenix
<rhx-select rhx-label="Small" rhx-size="small"
rhx-placeholder="Small" rhx-items="Model.Cities" name="sel-sm" />
<rhx-select rhx-label="Medium (default)"
rhx-placeholder="Medium" rhx-items="Model.Cities" name="sel-md" />
<rhx-select rhx-label="Large" rhx-size="large"
rhx-placeholder="Large" rhx-items="Model.Cities" name="sel-lg" />
htmx Integration
United States
Canada
United Kingdom
Select a country to see cities...
<rhx-select rhx-label="Country" name="country"
rhx-placeholder="Choose a country"
hx-get="/Docs/Components/Select?handler=Cities"
hx-trigger="change"
hx-target="#city-results"
hx-include="this">
<rhx-option value="US">United States</rhx-option>
<rhx-option value="CA">Canada</rhx-option>
<rhx-option value="UK">United Kingdom</rhx-option>
</rhx-select>
<div id="city-results">Select a country to see cities...</div>
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 select |
rhx-hint |
string |
- |
Hint text displayed below the select |
rhx-size |
string |
medium |
Select size: small, medium, large |
rhx-disabled |
bool |
false |
Whether the select is disabled |
rhx-required |
bool |
false |
Whether the field is required |
rhx-placeholder |
string |
- |
Placeholder text when no selection |
rhx-items |
List<SelectListItem> |
- |
Server-side items to render as options |
rhx-multiple |
bool |
false |
Allow multiple selections |
rhx-with-clear |
bool |
false |
Show a clear button when a value is selected |
rhx-filled |
bool |
false |
Use filled appearance |
Accessibility
- Renders a native
<select>element with full keyboard support. - Label is associated via
for/idpairing. - Required and disabled states are conveyed natively.
- Multi-select uses
aria-multiselectable.