5-star · click + hover
Hover previews the next value. Click commits. Arrow keys nudge focus and value in lock-step.
3 of 5 stars
Rating
Stars, emoji, numbers — same radiogroup pattern under the hood. Hover-previews, half-precision, full keyboard support, ARIA-correct read-aloud labels.
Half-star precision
Hovering the left half of a star yields a half-value. Useful for averaged review aggregates.
3.5 of 5 stars
Emoji rating · 1-5
Same radiogroup, different glyphs. Reads as “sad / mild / neutral / happy / delighted”.
3 of 5 · okay
NPS-style number row
Ten flat buttons. Suitable for NPS, course difficulty, intensity scales.
8 of 10
Read-from-data
data-readonly="true" + a value renders a non-interactive aggregate. Hover and focus are inert; the read-aloud label still announces.
★★★★☆ · 4 of 5 (average)
Roving-tabindex radiogroup
Tab enters the group, arrow keys move and commit. The hidden aria-live region announces the current value.
→ tab in, then use ← → to rate
Usage
Stars: <div data-rate data-max="5" data-value="3.5" data-half="true" data-readonly="true">. The script builds a role="radiogroup" of role="radio" buttons with full hover-preview and arrow-key navigation. Emits lsd:rate:change with { value, max }.
Emoji and numeric variants follow the same ARIA pattern but ship as static markup so authors can customize labels per glyph.