# Rating

> Stars for choosing or showing a score, on native radio buttons.

## Anatomy

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.

Rate this recipe 1 star 2 stars 3 stars 4 stars 5 stars

```
<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`.

| Token | Default |
| --- | --- |
| `--md-comp-rating-size` | 24px; display: 20px |
| `--md-comp-rating-color` | `--md-sys-color-tertiary` |
| `--md-comp-rating-empty-color` | `--md-sys-color-outline-variant` |
| `--md-comp-rating-value` | 0 (display) |
| `--md-comp-rating-max` | 5 (display) |