Rating
Five squares, not stars. Pure CSS fill via :has(), with a hover preview.
Examples
Rating
Anatomy
fieldset.rating | The row. Name it with aria-label or a <legend>. |
> label | One square per value, in ascending order. |
label > input[type=radio] | Covers the square, invisible. All share a name; value is the score. |
label > span.sr-only | The number, as the radio's accessible name. |
API
| Attribute | Values | Description |
|---|---|---|
checked | boolean | On one radio: that square and every one before it fill with the warning colour. |
value | <n> | The score the form submits. |
Accessibility
- Each radio needs a name: the visually hidden number (or "3 of 5") in
span.sr-only. - Hovering previews a value by filling up to the pointer; the checked value shows again when the pointer leaves.
- Once a value is checked it can't be cleared with the keyboard. Add a separate reset if "no rating" must be possible.
| Key | Effect |
|---|---|
| ← / → | Lowers or raises the rating by one. |
| Tab | Enters the rating at the checked square; the rating is one tab stop. |