---
title: Rating
description: Numbered buttons from 1 to max with radio semantics for rating fields.
preview: rating
---
# Rating

A row of square buttons from `min` (default 1, may be 0) through `max` (default 5, between 2 and 10). The value is an integer. `Field` renders it for `rating`.

## Preview
<!-- preview: rating -->

## Usage
```tsx
// { key: 'score', type: 'rating', label: 'How likely are you to recommend us?', max: 5, required: true }
import { Form } from '@trymirio/mirio';

<Form schema={feedback} client={mirio} />

// by hand:
import { Rating } from '@trymirio/mirio';
<Rating name="score" buttonClassName="rounded-full" />
```

## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | required | The field key. The range comes from the schema: `field.min` (default 1) to `field.max` (default 5). |
| `className` | `string` | `flex flex-wrap gap-2` | Merged onto the group element. |
| `buttonClassName` | `string` | rating button classes (`size-10 …`) | Merged onto every button. |
| …`<div>` attributes | | | Spread on the group element (except `onChange`). |

Rendered: `<div id role="radiogroup" tabindex="-1" aria-labelledby data-mirio="rating">` with one `<button type="button" role="radio" aria-checked aria-label="3 of 5" data-value="3">3</button>` per step. Only the chosen number is highlighted (it is a scale, not stars).

## Variants and states
- **Checked**: `--mirio-primary` background with `--mirio-primary-fg` text.
- **Hover**: `--mirio-muted`.
- **Error**: `aria-invalid` on the group, message below.
- **Prefill**: `defaultValue: 4`.

## Customization
- Tokens: `--mirio-bg`, `--mirio-fg`, `--mirio-border`, `--mirio-muted`, `--mirio-primary`, `--mirio-primary-fg`, `--mirio-ring`, `--mirio-radius`.
- Larger: `buttonClassName="size-12 text-base"`. A 0–10 scale wraps because the group is `flex-wrap`; use `className="flex-nowrap gap-1"` to keep it on one line.
- To render stars or emoji, build on `useField(name)` and keep the radio semantics below.
- CSS hooks: `[data-mirio="rating"]`, `[data-mirio="rating"] [aria-checked="true"]`, `[data-value="5"]`.

## Accessibility
`role="radiogroup"` labelled by the field label; each step is `role="radio"` with `aria-checked` and an `aria-label` like "3 of 5"; roving `tabindex`; arrow keys and Home/End move selection and focus.

## Related
[YesNo](/docs/components/yes-no.md), [Choice](/docs/components/choice.md), [Schema: field types](/docs/schema.md)