Rating
Star rating control with half-star precision, custom max, and model binding.
<rhx-rating>
Examples
Basic
<rhx-rating name="rating" rhx-label="Rate this product" />Pre-set Value
<rhx-rating name="rating-pre" rhx-label="Rating" value="3" />Half-star Precision
<rhx-rating name="rating-half" rhx-label="Detailed Rating"
value="3.5" rhx-precision="0.5" />Custom Max
<rhx-rating name="rating-10" rhx-label="Extended Rating"
rhx-max="10" value="7" />Readonly
<rhx-rating name="rating-ro" rhx-label="Average Rating"
value="4" rhx-readonly="true" />Sizes
<rhx-rating name="rt-sm" rhx-label="Small" rhx-size="small" value="3" />
<rhx-rating name="rt-md" rhx-label="Medium (default)" value="3" />
<rhx-rating name="rt-lg" rhx-label="Large" rhx-size="large" value="3" />States
<rhx-rating name="rt-dis" rhx-label="Disabled rating"
rhx-disabled="true" value="2" />Model Binding
<rhx-rating rhx-for="ProductRating" rhx-label="Product Rating" />htmx Integration
Click a star to submit your rating...
<rhx-rating name="productRating"
rhx-label="Rate this product"
hx-post="/Docs/Components/Rating?handler=SubmitRating"
hx-trigger="change"
hx-target="#rating-result"
hx-include="this" />
<div id="rating-result">Click a star to submit your rating...</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 rating value |
rhx-label |
string |
- |
Accessible label for the rating group |
rhx-max |
int |
5 |
Maximum number of stars |
rhx-precision |
double |
1 |
Rating precision: 1 or 0.5 |
rhx-readonly |
bool |
false |
Display-only mode |
rhx-size |
string |
medium |
Rating size: small, medium, large |
rhx-disabled |
bool |
false |
Whether the rating is disabled |
Accessibility
- Uses
role="radiogroup"with individual star buttons acting as radio inputs. - Each star has an
aria-labeldescribing its value (e.g., "3 out of 5 stars"). - Keyboard arrow keys navigate between star values.
- Readonly mode uses
aria-readonly="true"and removes interactive elements.