Rating
v1.0.6Updated 4 Oct 2026Five-star rating with half-star precision, hover preview, hover labels, custom icon support, read-only / disabled states, and three sizes.
Preview
Live · 11 stories▸Why this is recommendedformratingstarsreview+2
The default, out-of-the-box Rating.
- ✓Review / feedback forms
- ✓Product ratings
- ✓Like / favourite controls
- 1-5 stars (configurable max)
- Precision: 0.5 (half-star) or 1
- Hover preview
- Hover label slot
- Custom icon (heart, thumbs-up, …)
- Read-only + disabled states
- Sizes sm / md / lg
- Labelled by FormField: the div role=slider takes the id and is named by the field label through aria-labelledby; the built-in "Rating" name steps aside
- ✕Numeric input with > 10 values (use Slider)
- ✕Yes / no (use Switch)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
valueCurrent rating
—onValueChangeValue change callback
—maxMaximum stars
—precisionStep precision
—iconCustom icon
—readOnlyRead-only display
—hoverLabelsPer-step hover labels
—aria-labelAccessible name; defaults to labels.ariaLabel ("Rating") except inside a labelled FormField
—aria-labelledbyId(s) of the element(s) that label the slider; wins over a FormField label
—idDOM id set on the focusable slider; FormField clones its field id in, and its label then names the control
—aria-describedbyId(s) of hint or error text describing the slider (FormField clones this in)
—aria-invalidMark the slider invalid; FormField clones this in from its error prop
—aria-requiredMark the slider required; FormField clones this in from its required prop
—