Rating
Star rating input for reviews, feedback, and scoring. Supports hover preview, controlled and uncontrolled modes, read-only display, and custom star counts.
Examples
Sizes
Controlled
Not rated
Custom max
Read only
Disabled
Props
value
number
Controlled value (1–max). 0 means no selection.
defaultValue= 0
number
Initial value for uncontrolled usage.
max= 5
number
Number of stars.
size= 'md'
'sm' | 'md' | 'lg'
Star dimensions.
readOnly= false
boolean
Display-only — no hover or click interaction.
disabled= false
boolean
Muted and non-interactive.
onChange
(value: number) => void
Called when a star is clicked. Clicking the active star passes 0 (deselect).
label= 'Rating'
string
Accessible label for the group.
className
string
Extra class on the outer wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Controlled value (1–max). 0 means no selection. |
| defaultValue | number | 0 | Initial value for uncontrolled usage. |
| max | number | 5 | Number of stars. |
| size | 'sm' | 'md' | 'lg' | 'md' | Star dimensions. |
| readOnly | boolean | false | Display-only — no hover or click interaction. |
| disabled | boolean | false | Muted and non-interactive. |
| onChange | (value: number) => void | — | Called when a star is clicked. Clicking the active star passes 0 (deselect). |
| label | string | 'Rating' | Accessible label for the group. |
| className | string | — | Extra class on the outer wrapper. |