Rating
Rating
A rating component for selecting a value with interactive icons.
Basic
A simple star rating with default settings.
Value: 0
Half Ratings
Allow half-star ratings for more granular control.
Value: 2.5
Icon Types
Different icon types: Star, Heart, and Circle.
Star:
Heart:
Circle:
Sizes
Small, Medium, and Large sizes.
Small:
Medium:
Large:
Value: 3
Custom Max Rating
Set a custom maximum rating (default is 5).
Value: 5 / 10
Disabled
Disabled state prevents interaction.
Read-Only
Read-only state displays the rating without allowing changes.
Allow Clear
Click the same rating again to clear it (AllowClear is true by default).
Value: 3 (Click the same star twice to clear)
No Clear
Prevent clearing by setting AllowClear to false.
Value: 3
Keyboard Support
Use arrow keys to adjust, number keys (1-5) to set directly, or 0 to clear.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | double | 0 | The current rating value. |
| MaxRating | int | 5 | Maximum number of rating icons displayed. |
| AllowHalf | bool | false | When true, half-value ratings are allowed. |
| AllowClear | bool | true | When true, clicking the current value clears the rating. |
| ReadOnly | bool | false | When true, the rating is displayed but not interactive. |
| Disabled | bool | false | When true, the rating is non-interactive and visually dimmed. |
| IconType | RatingIconType | Star | Icon shape. Options: Star, Heart, Circle. |
| Size | RatingSize | Medium | Icon size. Options: Small, Medium, Large. |
| Class | string? | — | Additional CSS classes appended to the root element. |