cnc-rating
A star rating that reads and writes a number. Fractional values render as partially filled stars, server-side as well as in the browser, and the control is keyboard-operable.
Quick start
Bind $value to a number. Click or drag across the stars to set it; arrow keys move
it by one precision step.
value: 3
<div x-data="{ score: 3 }">
<cnc-rating $value="score" @change="score = $event.detail.value"></cnc-rating>
</div>Keyboard
Focus the stars and use the keys below. Every one of them respects
precision
and stops at the ends of the scale, so a rating cannot be driven past
max
or below zero.
| Key | Effect |
|---|---|
| ← / → | Down or up by one precision step. |
| Home | Zero — which is how a keyboard user clears a rating. |
| End | The maximum. |
Usage guidance
Use readonly for an average and leave the control interactive only where the user
is actually rating something. The two look similar and behave completely differently, and a
displayed average that responds to clicks is the commonest way to get this wrong.
Keep precision at 1 for input and use fractions for DISPLAY. People do not choose
3.5 stars reliably by pointing, but an average of 3.7 is worth drawing accurately — which
is exactly what the partial fill is for.
Zero is a real rating rather than an empty one. Where you need to tell "rated zero" apart from "not yet rated", hold that distinction in your own state; the widget cannot express it.