Pick or show a score with stars or any other icon. The value only changes when the user clicks or uses the arrow keys, and hovering shows a preview.
Control it with value and onChange, or start it with initialValue.
Pass the property type to change the color.
outline shows only the border of the empty icons, filled fills them with a soft color.
With precision={0.5} each icon can be picked by its half.
readOnly shows a score without picking, disabled blocks it, and clearable lets a second click on the same value clear it.
Customize the amount of icons with count.
Use icon for the filled state and emptyIcon for the empty one. With highlightSelectedOnly only the picked icon is lit, good for faces or emojis.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| value | current score, to control the component | number | 0 to count | - |
| initialValue | score at the start | number | 0 to count | 0 |
| onChange | called with the score the user picked | (value: number) => void | - | - |
| onHoverChange | called with the previewed score, or null on leave | (value: number | null) => void | - | - |
| count | amount of icons | number | - | 5 |
| precision | step of the score | RatingPrecision | 1, 0.5 | 1 |
| type | color of the icons | RatingTypes | RatingTypes | default |
| variant | look of the empty icons | RatingVariants | 'outline', 'filled' | outline |
| icon | icon of the filled state | React.ReactNode | - | star |
| emptyIcon | icon of the empty state | React.ReactNode | - | icon |
| readOnly | show the score without picking | boolean | - | false |
| disabled | block the component | boolean | - | false |
| clearable | a click on the current score clears it | boolean | - | false |
| highlightSelectedOnly | light only the icon of the score | boolean | - | false |
| getLabel | accessible name of each score | (value: number, count: number) => string | - | 3 of 5 |
| ... | native props | HTMLAttributes | - | - |
type RatingTypes =
'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'
The component is a group of native radio buttons, so the arrow keys move the score and Tab leaves the group. Give it an aria-label. With readOnly or disabled it becomes an image named by getLabel.