Radial Select
A rectangular trigger flush-left against a dropdown opens a circular SVG pie of category wedges. Selecting a wedge cascades the dropdown's option set via htmx and echoes the category color + icon onto the trigger.
<rhx-radial-select>
Examples
Basic — pie category → cascading dropdown
<rhx-radial-select name="FoodItem" rhx-category-name="Category"
rhx-default-category="fruit"
rhx-placeholder="Choose an item…" aria-label="Food category">
<rhx-radial-option rhx-value="fruit" rhx-label="Fruit" rhx-icon="heart" rhx-color="danger"
hx-get="/Docs/Components/RadialSelect?handler=Items&cat=fruit" />
<rhx-radial-option rhx-value="veg" rhx-label="Veggies" rhx-icon="star" rhx-color="success"
hx-get="/Docs/Components/RadialSelect?handler=Items&cat=veg" />
<rhx-radial-option rhx-value="meat" rhx-label="Meat" rhx-icon="grid" rhx-color="warning"
hx-get="/Docs/Components/RadialSelect?handler=Items&cat=meat" />
<rhx-radial-option rhx-value="drink" rhx-label="Drinks" rhx-icon="globe" rhx-color="brand"
hx-get="/Docs/Components/RadialSelect?handler=Items&cat=drink" />
</rhx-radial-select>Automatic color cycle
Omit rhx-color and wedges are assigned colors deterministically:
brand → success → warning → danger → neutral.
<!-- Omit rhx-color and wedges auto-cycle: brand → success → warning → danger → neutral -->
<rhx-radial-select name="Pick" aria-label="Auto-colored">
<rhx-radial-option rhx-value="a" rhx-label="One" rhx-icon="star" hx-get="...?cat=a" />
<rhx-radial-option rhx-value="b" rhx-label="Two" rhx-icon="heart" hx-get="...?cat=b" />
<rhx-radial-option rhx-value="c" rhx-label="Three" rhx-icon="grid" hx-get="...?cat=c" />
</rhx-radial-select><rhx-radial-select> Properties
Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-for |
ModelExpression |
- |
Model binding for the dropdown value (mutually exclusive with name) |
name |
string |
- |
Form field name for the dropdown value when not using rhx-for |
rhx-category-name |
string |
- |
Optional. Form field name submitting the active category value |
rhx-default-category |
string |
- |
Optional. rhx-value of the wedge to activate on initial render |
rhx-placeholder |
string |
- |
Dropdown placeholder shown before any option is selected |
rhx-size |
string |
medium |
Control size: small, medium, large |
rhx-disabled |
bool |
false |
Disables the whole control |
aria-label |
string |
- |
Accessible name for the category picker |
<rhx-radial-option> Properties
Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-value |
string |
required |
Category identifier submitted via rhx-category-name |
rhx-label |
string |
required |
Accessible name + visible label for the wedge |
rhx-icon |
string |
- |
Icon name resolved through IconRegistry |
rhx-color |
variant |
cycle |
brand, success, warning, danger, neutral. Omitted = deterministic cycle |
hx-get |
string |
- |
Endpoint returning this category's option fragment |
rhx-disabled |
bool |
false |
Renders the wedge dimmed and non-selectable |
Accessibility
- The visual is radial; the accessibility tree is a menu. Trigger uses
aria-haspopup="menu"witharia-expanded. - The pie uses
role="menu"; each wedge is arole="menuitemradio"witharia-checked(single active category). - Keyboard: Enter / Space / ArrowDown opens the pie; arrow keys + Home/End move between wedges; type-ahead jumps by label; Enter / Space selects; Escape closes and returns focus to the trigger.
- Selecting a wedge echoes the category color + icon onto the trigger, swaps the dropdown's options, and auto-selects the first option.
- Disabled wedges render with
aria-disabled="true"and cannot be selected.