Rating
The <pines-rating> component provides an interactive star or heart rating input. Use it in forms to capture user satisfaction scores, product ratings, or any numeric preference expressed on a visual scale. It integrates with ASP.NET Core model binding via asp-for, and can also be used in a read-only display mode to show existing ratings.
Properties
| Attribute | Type | Default | Description |
max-stars
|
int
|
5
|
Total number of rating icons rendered. Defaults to 5. Increase for higher-resolution scales (e.g., 10) or decrease for simpler binary-style ratings. |
initial-value
|
int
|
0
|
Pre-selected rating shown when the component renders. Use this to display an existing rating from your data model, or leave at 0 to start with no selection. |
disabled
|
bool
|
false
|
When true, the rating is rendered in a non-interactive, read-only state. Use to display a rating that the user should see but not change — such as an aggregate score or a submitted review. |
rating-type
|
PinesRatingTypeEnum
|
Star
|
Selects the icon used to represent each rating point. Choose the shape that best fits the tone of your UI. |
asp-for
|
ModelExpression?
|
N/A | Model binding expression connecting the selected rating value to a property on the page model. Enables automatic form submission and validation integration. |
PinesRatingTypeEnum Values
| Value | Description |
Star
|
Five-pointed star icon. The standard rating metaphor — use for product reviews, service quality ratings, or any context where star ratings are a recognized convention. |
Heart
|
Heart icon. Use for likes, favorites, or any rating context where affection or preference is the primary sentiment being expressed. |