Build an interactive Star Rating component — one of the most common UI elements in e-commerce, review systems, and feedback forms.
Problem
Create a StarRating component that allows users to select a rating by clicking on stars and see a hover preview before committing.
1. Display Stars
- Render a configurable number of stars (default: 5)
- Filled stars represent the current rating
- Empty stars represent unselected positions
2. Click to Rate
- Clicking a star sets the rating to that star's position
- Clicking the same star again should reset the rating to 0
3. Hover Preview
- Hovering over a star temporarily highlights all stars up to and including the hovered star
- Moving the cursor away restores the display to the committed rating
4. Accessibility
- Each star must be a
<button> (not a <div> or <span>) - Include an
aria-label on each star button (e.g., "Rate 3 out of 5 stars")
5. Display Current Rating
- Show the current numeric rating below the stars (e.g., "Rating: 3 / 5")
Examples
// Default 5 stars
<StarRating />
// Custom star count
<StarRating maxStars={10} />