Data Display
Rating
A star rating — a fractional-fill display for aggregate scores, or an interactive input when you pass a change handler. Filled stars take the theme's secondary fill.
Display
Import
import { Rating } from "@mikenotthepope/substrateui"Sizes
Interactive
3/5
Accessibility
The display variant exposes an imgrole with a label like "Rating: 4 out of 5". The interactive variant is a radiogroup of star buttons — each is keyboard focusable and labelled, and hover/focus preview the value before selection.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current rating. Fractional values (e.g. 3.5) fill partially in read-only mode. |
max | number | 5 | Number of stars. |
size | "sm" | "md" | "lg" | "md" | Star size. |
onValueChange | (value: number) => void | — | When provided, stars become interactive and this fires with the chosen value (1..max). |
readOnly | boolean | — | Force a non-interactive display even with a handler. |
label | string | "Rating" | Accessible label for the group. |