---
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 'kibbleforms';

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

// by hand:
import { Rating } from 'kibbleforms';
<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-kb="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**: `--kb-primary` background with `--kb-primary-fg` text.
- **Hover**: `--kb-muted`.
- **Error**: `aria-invalid` on the group, message below.
- **Prefill**: `defaultValue: 4`.

## Customization
- Tokens: `--kb-bg`, `--kb-fg`, `--kb-border`, `--kb-muted`, `--kb-primary`, `--kb-primary-fg`, `--kb-ring`, `--kb-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-kb="rating"]`, `[data-kb="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)