Star Rating Input
Five-star rating on native radios: hovering sweeps the fill up to the pointer with a stagger, clicking locks it with a spring pop, a sparkle and a cross-faded word.
About This Component
A five-star rating that answers the pointer before it is asked to commit. Moving across the row sweeps the fill up to the star under the cursor, one star behind the next, and leaving the row rolls it back to whatever was actually chosen. A click locks the rating with a spring pop on the chosen star, a short sparkle, and a word underneath that cross-fades from Poor through to Excellent.
Read the full effect overview
The control is a real radio group. Tab reaches it, the arrow keys move through it, it submits with an ordinary form, and a screen reader reads each option's label. Half stars are a single data-half attribute on the wrapper, not a second component. Ships in three looks, vault, paper and brutal, switched with one data-variant attribute.
What's Included
- Hover sweep that fills up to the pointer with a per-star stagger
- Roll-back on leave, staggered from the far end so it unwinds
- Spring pop on the chosen star with an elastic settle
- Sparkle burst in the variant's accent, built and cleaned up per click
- Rating word cross-fades between Poor, Fair, Good, Great and Excellent
- Half-star support with a single data-half attribute
- Native radio group: Tab, arrow keys, forms and screen readers all work
- Stars still fill from :checked with no JavaScript running
- Three shipped variants: vault, paper, brutal
Perfect For
- Product and order review forms in ecommerce
- Post-delivery and post-support satisfaction prompts
- Course, recipe and article feedback blocks
- Any rating field that should feel worth filling in
How It Works
The radios are the control
Five transparent hit strips are laid across the stars in DOM order, one radio each, so the browser supplies focus, arrow-key movement, form submission and the announced label. The stars themselves are aria-hidden decoration; nothing keeps the rating in a variable of its own.
Fill is a clipping window
Each star is drawn twice, an empty one and a coloured one inside an overflow-hidden span. GSAP animates that span's width as a percentage, so a fill of 50 per cent is a genuine half star rather than a second icon. The hover sweep tweens all five widths at once with a stagger that runs from the start on the way up and from the end on the way back.
Lock, pop, sparkle
A change event on the radio group paints the fill instantly, then springs the chosen star from scale 0.72 with elastic.out and appends a handful of sparkle spans that tween outward and remove themselves. The sparkle colour is read from --star-on with getComputedStyle at the moment it runs, so a new variant is CSS only.