Rating
A score out of a few stars, as native radios.
On this page
A rating is a score out of a few stars. It is a group of native radios, each drawn as a star in ink, so the arrow keys, the form value and assistive technology work as they do for any radio group.
Rating
<fieldset class="rating" aria-label="Rating"> <input type="radio" class="rating-input" name="rating" value="1" aria-label="1 star"> <input type="radio" class="rating-input" name="rating" value="2" aria-label="2 stars"> <input type="radio" class="rating-input" name="rating" value="3" aria-label="3 stars"> <input type="radio" class="rating-input" name="rating" value="4" aria-label="4 stars" checked> <input type="radio" class="rating-input" name="rating" value="5" aria-label="5 stars"></fieldset>#How the stars fill
The radios are in reading order, one to five. :has() fills every star that has the checked one after it, and the checked one itself: .rating-input:has(~ .rating-input:checked). The same selector with :hover previews the score under the pointer. Before :has(), this needed the stars in reverse order and a reversed row, which broke the keys.
#Sizes
Stars are 20px. rating-sm is 16px, for a row in a list, and rating-lg is 24px. On a touch screen each star is drawn at 28px at least, and a star that can be chosen stands in a 44px target of its own: the stars part instead of swelling. Stars that only show a score keep their spacing.
Sizes
<fieldset class="rating rating-sm" aria-label="Small rating"> <input type="radio" class="rating-input" name="rating-sm" aria-label="1 star"> <input type="radio" class="rating-input" name="rating-sm" aria-label="2 stars" checked> <input type="radio" class="rating-input" name="rating-sm" aria-label="3 stars"> <input type="radio" class="rating-input" name="rating-sm" aria-label="4 stars"> <input type="radio" class="rating-input" name="rating-sm" aria-label="5 stars"></fieldset><fieldset class="rating rating-lg" aria-label="Large rating"> <input type="radio" class="rating-input" name="rating-lg" aria-label="1 star"> <input type="radio" class="rating-input" name="rating-lg" aria-label="2 stars"> <input type="radio" class="rating-input" name="rating-lg" aria-label="3 stars"> <input type="radio" class="rating-input" name="rating-lg" aria-label="4 stars"> <input type="radio" class="rating-input" name="rating-lg" aria-label="5 stars" checked></fieldset>#Read only
To show a score, disable the radios: the stars keep their ink and stop answering the pointer. Say the score in words beside them, since a row of stars is not a number.
Read only
<div class="flex items-center gap-xs text-sm fg-text-muted"><fieldset class="rating rating-sm" aria-label="Rated 3 out of 5" disabled> <input type="radio" class="rating-input" name="rating-ro" aria-label="1 star"> <input type="radio" class="rating-input" name="rating-ro" aria-label="2 stars"> <input type="radio" class="rating-input" name="rating-ro" aria-label="3 stars" checked> <input type="radio" class="rating-input" name="rating-ro" aria-label="4 stars"> <input type="radio" class="rating-input" name="rating-ro" aria-label="5 stars"></fieldset>3.0 from 128 reviews</div>#Accessibility
- Name the group with
aria-labelor a<legend>, and each radio with its score. - A star is cut with a mask, which would also cut its own focus ring, so the group carries the ring while one of its radios has keyboard focus.
- Stars are ink, not yellow: the interface keeps hue for status.
#Classes
| Class | Description |
|---|---|
rating | The group of stars, on a fieldset named by aria-label or a legend. It carries the focus ring for its radios |
rating-input | A star, on a radio named with its score. The radios stand in reading order, lowest first |
rating-sm | 16px stars, for a row in a list; the default is 20px. With rating |
rating-lg | 24px stars; the default is 20px. With rating |