# Ratings
Stars that show a mark out of five - an average of reviews, a guide's score - and five radios drawn as stars for giving one.
## Examples
`rating` draws five stars filled to `data-v`, the mark's share of the most from 0 to 1 - 4.2 of 5 is `0.84`; the library sets it as `--v` through the CSSOM, so a page under a strict CSP writes no style. The stars are a picture: `role="img"` with the mark in `aria-label`, and the number in words beside them when it matters. They take the size of the text around them.
```html
4.2128 reviews
```
### Giving a mark
`fieldset class="rating-input"` holds five radios, each an input before its `label`: the library hides the inputs and draws each label as a star, filled up to the one checked - and up to the one under the pointer. The words of each label are for a screen reader, in a `visually-hidden` span; the `legend` names the mark. The radios stay the control: the arrow keys move the mark, the form sends it.
```html
```
## Keyboard and accessibility
- A shown mark is one picture with its words - "4.2 of 5" - not five stars read one by one.
- A mark given is a group of radios: `Tab` into it, the arrows move the mark, a screen reader says "4 stars, radio button, checked, 4 of 5".
- The stars are drawn in the warning tone on the strong border's grey; in forced colors, in the text colour on grey.
## Tokens
From [`css/components/rating.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/rating.css). It declares `--redz-rating-fill`, `--redz-warning`, `--redz-border-strong` on its root, never on rows or items.
It reads the theme's `--redz-star`, `--redz-radius-6`, `--redz-focus`.