An input to provide rating values. Recommended for use when values are less than 10. For larger values, use the range slider component.
Basic Example
Click on the stars or use number keys to set a rating:
No preview available
Example
Highlighting code...
Custom Icons
By default, the Rating component uses star icons. You can customize them to use hearts, thumbs up, or any other icon.
No preview available
Example
Highlighting code...
Properties
Core Properties
- value: Current rating value (bindable)
- max: Maximum value allowed (default: 5)
- id: Unique identifier for the rating input
- name: Name for form integration
Customization
- stateIcons: Custom icons for filled/empty states
- class: Custom CSS classes for styling
Keyboard Navigation
- Arrow Keys: Navigate between rating values
- Number Keys (1-9): Directly select a rating value
- Space/Enter: Confirm selection