Star Rating in a Form
Build a star-rating widget that lives inside a form and submits the right value. The form, basic CSS, and two mount points are given; you add the control. Two ratings share the page, so multiple instances must work. Available as an HTML/CSS/JS template and a React one.
Requirements
- Clicking a star selects that rating; the stars up to it light up.
- Submitting the form includes each rating as
name → value(the page printsFormDataunder the button). - Keyboard users can pick a rating; screen readers hear a labelled group.
- The two instances never interfere with each other.
- Hovering previews a rating without committing it.
Hints
Hint 1
Say the key insight out loud: use real radio inputs. Then the form submits the value with zero JS, arrows/space work natively, screen readers get a radio group, and N instances are just N names.
Hint 2
Vanilla: render the radios 5 → 1 and lay the fieldset out with flex-direction: row-reverse, so input:checked ~ label lights every star to the left using only the sibling combinator. React: compute star <= (hover || value) per label instead.
Hint 3
Hide the inputs visually, not with display:none — display:none removes them from the tab order. The given .visually-hidden class is there for exactly this.