Rating Group
Star rating input.
Usage
Root hands you an items array through a snippet — each with an index and a state of active, partial or inactive — so the icon is yours to choose. Half-star readings are
expressible through partial.
value: 3 — try the arrow keys
Always set aria-valuetext
Pass the function form: (v, max) => `${v} of ${max} stars`. Without it the rating is
announced as a bare number, and "3" tells the user nothing — three out of five? out of ten? A
rating is meaningless without its scale, and that is precisely what a sighted user gets for
free from seeing five stars.
Root also needs a name via aria-label. Bits supplies
the role and the numeric values; it cannot invent what is being rated.
It is a slider, not buttons
Bits gives Root role="slider" with the aria-value* attributes, so the arrow keys adjust the rating and the
whole control is one tab stop. The items are role="presentation" — decorative, with the value living on the Root.
That is why you name and describe the Root and not each star. It is also why a hand-rolled row of clickable icons is not the same component: it looks identical and is unusable by keyboard.
Props
RatingGroup.Root — value is bindable.
| Prop | Type | Default |
|---|---|---|
value Current rating. Bindable. | number | 0 |
size | 'sm' | 'md' | 'lg' | 'md' |
class Extra classes merged onto the root. | string | — |
max How many items. Also the aria-valuemax. | number | — |
aria-valuetext Spoken value. Pass the function form so the scale is announced, not just a number. | string | ((value, max) => string) | — |
onValueChange | (value: number) => void | — |
name Include it in a form submission; Bits renders a hidden input. | string | — |
orientation | 'horizontal' | 'vertical' | 'horizontal' |
disabled | boolean | false |
required | boolean | false |
RatingGroup.Item takes index from the snippet
plus class.
| Prop | Type | Default |
|---|---|---|
class Extra classes merged onto the item. | string | — |