Build a star rating control

Medium35 minFree, no account

Everyone builds the hover. The marks are in the keyboard and the form.

The question

Build a five-star rating control: hover previews, click sets, and the current value is visible.

It must be operable by keyboard and usable with a screen reader, and it must submit inside a form.

<StarRating name="score" value={3} onChange={fn} />

// hover star 4   → stars 1-4 filled, value still 3
// mouse leaves   → back to 3
// click star 4   → value is 4

35:00Commit to an answer before you open the solution. Reading it first teaches you to recognise good answers, which is not the skill being tested.

Stuck?

0 of 3 hints taken

The worked solution

written by a person · not a grade

Score yourself

0 of 5 marked

Used a native control, or justified a full ARIA implementation25
Hover preview separate from committed value25
Keyboard operable with visible focus25
Announced correctly and submits in a form15
Said where the approach stops working10

We run no AI here and nothing on this page grades you. The score is yours, and the useful number is the one you get on the same problem a month from now, cold.

kept in this browser only