# Rating · MIAN

Star rating built from radio buttons, so it submits with a form and needs no JavaScript.

- Id: `rating` · Category: Forms · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/rating
- Use for: star rating input, rate a product, review stars.
- Alternatives: review-summary.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-rating`: A fieldset of radios in reverse order.
- `mn-rating-sm · mn-rating-lg`: Sizes.

## Accessibility

- Each star is a radio with a text label ("3 stars"), so it is announced and arrow-keyable. Inputs are listed highest first for the CSS; the visual order is still left to right.

## Examples

### Basic

```html
<fieldset class="mn-rating" aria-label="Rating">
  <input type="radio" id="r5" name="rating" value="5"><label for="r5" title="5 stars"><span class="mn-sr-only">5 stars</span></label>
  <input type="radio" id="r4" name="rating" value="4" checked><label for="r4" title="4 stars"><span class="mn-sr-only">4 stars</span></label>
  <input type="radio" id="r3" name="rating" value="3"><label for="r3" title="3 stars"><span class="mn-sr-only">3 stars</span></label>
  <input type="radio" id="r2" name="rating" value="2"><label for="r2" title="2 stars"><span class="mn-sr-only">2 stars</span></label>
  <input type="radio" id="r1" name="rating" value="1"><label for="r1" title="1 star"><span class="mn-sr-only">1 star</span></label>
</fieldset>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/rating/source