RatingGroup
Star rating input with accessible radio group pattern
Category: inputs · WCAG 2.2-AA · form, rating, stars, input, feedback
Sizes
- sm
- md
- lg
States
- idle
- disabled
- readOnly
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | The controlled value. |
onValueChange | (v: number) => void | — | Called with the new value when it changes. |
max | number | 5 | Maximum allowed value. |
size | 'sm' | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
readOnly | boolean | false | When true, the value is shown but cannot be edited. |
labels | RatingGroupLabels | — | Overrides for the component’s user-visible strings (i18n). |
Design tokens
--cascivo-color-warning--cascivo-color-border-strong--cascivo-color-accent--cascivo-radius-sm
When to use
- Capturing a discrete subjective rating on a small fixed scale (e.g. 1–5 stars)
- Displaying an existing rating read-only as a compact star summary
When not to use
- Choosing along a continuous or large numeric range — use Slider
- Entering an exact bounded number with steppers — use NumberInput
- A non-rating single choice among labeled options — use Radio or SegmentedControl
How to build an accessible RatingGroup in React →
Examples
Basic
<RatingGroup value={3} onValueChange={() => {}} />Read only
<RatingGroup value={4} readOnly />Related components
- Slider — Use for continuous or larger numeric ranges
- NumberInput — Use when an exact typed number is needed rather than a rating