Rating

A <fieldset class="rating"> holds one radio per star. The radio is drawn as the star, so Tab, the arrow keys and form submission stay native.

Give each star a <label> with visually hidden text before the radio, such as "3 stars". A star fills when it or a later star is checked, and hovering previews a choice.

<fieldset class="rating">
  <legend>Rate this recipe</legend>
  <label><span class="visually-hidden">1 star</span><input type="radio" name="score" value="1"></label>
  <label><span class="visually-hidden">2 stars</span><input type="radio" name="score" value="2"></label>
  <label><span class="visually-hidden">3 stars</span><input type="radio" name="score" value="3"></label>
  <label><span class="visually-hidden">4 stars</span><input type="radio" name="score" value="4"></label>
  <label><span class="visually-hidden">5 stars</span><input type="radio" name="score" value="5"></label>
</fieldset>

Display

To show a score, give an element class="rating", role="img", an accessible name that states the value, and --md-comp-rating-value. The stars fill from the start edge up to that value, halves included.

4.5 (212 reviews)

<span class="rating" role="img" aria-label="Rated 4.5 out of 5"
      style="--md-comp-rating-value: 4.5"></span>

Tokens

Override these on the .rating.