Skip to content
algo150Open the app
Live coding · 20 minutes

Star rating input

Build a star rating input in React in 20 minutes. It shows five stars. The user chooses a rating from 1 to 5 with the mouse or with the keyboard, and hovering shows a preview. It must work in a form and for a screen reader user. Decide first which HTML to build on: a group of radio inputs gives you most of the keyboard and screen reader behavior without extra code. Explain your decisions while you code, as in a live round.

Start the clock in the app

Requirements

  • Five stars; a click on a star sets the rating to its number
  • Hovering over a star shows a preview up to that star; when the pointer leaves, the selected rating shows again
  • Keyboard: the Tab key reaches the control, and the arrow keys change the rating
  • A screen reader hears a group name, and for each star a name such as '3 stars' and whether it is selected
  • The API has value and onChange, and optional name and disabled props
  • The focus indicator is visible on the stars, also when the real inputs are visually hidden

What reviewers look for

  • A sound choice of HTML: native radio inputs in a fieldset with a legend, or a radiogroup built with care
  • Minimal state: the value comes from props, and only the hover value is local
  • The display is derived: stars are filled up to the hover value, or up to the selected value when there is no hover
  • It works with mouse, keyboard and touch; hover is an extra, not a requirement
  • A small API that matches native inputs: value, onChange, name, disabled
  • Speed: on a short task, a working version comes first and polish second

Check before you hand it in

  • A click on star 4 sets the rating to 4 and fills four stars
  • Hovering shows a preview, and when the pointer leaves, the selected rating shows again
  • With the keyboard only, I can reach the control and change the rating with the arrow keys, and I can see where focus is
  • The accessibility inspector shows a named group and five options with names such as '3 stars', one of them checked
  • I explained each decision aloud, including why I chose radio inputs or another pattern
  • Click, hover and keyboard all worked within 20 minutes

If there is time

  • Clear the rating when the user chooses the selected star again
  • Support half stars
  • A read-only mode that shows an average such as 3.5, with a text alternative