Selection methods
Users can rate using multiple interaction methods:
Mouse/cursor:
- Hover over stars to preview the rating
- Click a star to confirm the selection
- Hovering selects the rating in full-step increments
- Visual feedback shows which stars will be selected
Keyboard:
- Tab to focus on the star rating input
- Use Left Arrow (←) to decrease rating
- Use Right Arrow (→) to increase rating
- Press Enter to confirm selection
- Tab out to move to next form field (also confirms selection)
Touch:
- Tap a star to select that rating
- Visual feedback confirms the selection
Visual feedback
- Hovering or focusing shows which stars will be selected
- Selected stars are visually distinct (typically filled or colored)
- Empty stars are visually distinct (typically outlined or grey)
- Clear visual difference between selected and unselected states
Initial state
- Stars typically begin in an unselected state (zero stars)
- Some contexts may show a default or previous rating
- If a rating is required, indicate this clearly in the label or helper text