Components / Form & Input / Rating
Rating beta
Five stars, no JavaScript — a radio group wearing its meaning on its face.
<fieldset style="border:none;margin:0;padding:0"> <legend style="font-size:13px;font-weight:550;margin-bottom:9px">How was the session?</legend> <div class="k-rate"><input type="radio" name="k-rate-demo" id="kr5" value="5"><label for="kr5" aria-label="Rate 5 of 5"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg></label><input type="radio" name="k-rate-demo" id="kr4" value="4" checked><label for="kr4" aria-label="Rate 4 of 5"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg></label><input type="radio" name="k-rate-demo" id="kr3" value="3"><label for="kr3" aria-label="Rate 3 of 5"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg></label><input type="radio" name="k-rate-demo" id="kr2" value="2"><label for="kr2" aria-label="Rate 2 of 5"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg></label><input type="radio" name="k-rate-demo" id="kr1" value="1"><label for="kr1" aria-label="Rate 1 of 5"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg></label></div> </fieldset>
.k-rate{display:inline-flex;flex-direction:row-reverse;gap:3px;font-family:var(--k-font)}
.k-rate input{position:absolute;opacity:0;width:1px;height:1px}
.k-rate label{cursor:pointer;color:var(--k-border-strong);display:grid;place-items:center;padding:2px}
.k-rate label svg path{fill:none;transition:fill .12s}
.k-rate input:checked ~ label{color:var(--k-accent)}
.k-rate input:checked ~ label svg path{fill:currentColor}
.k-rate label:hover,.k-rate label:hover ~ label{color:var(--k-accent)}
.k-rate input:focus-visible + label{outline:2px solid var(--k-accent);outline-offset:2px;border-radius:6px}
Usage
For reviews and satisfaction scores. The stars are decoration; the radio group underneath is the actual control, so forms and keyboards just work.
Accessibility
Real radio inputs with text labels available to screen readers ("Rate 4 of 5"). Hover preview is pointer-only; the checked state never depends on it.
Related parts
Button stable
Black leads; lines and ghosts support. Hover, disabled and loading states included.
Checkbox / Radio stable
Native inputs with a restyled face. Keyboard support and form behavior stay intact.
Color Picker beta
A curated palette first, any color second — swatches for the 95% case, a native picker for the rest.
Combobox beta
Type to filter, arrows to choose — the Select for lists too long to scan.