Rating

Open in Playground

A star rating from 0 to max (5 by default). Click a star to set it, click the same one again to clear it. precision={0.5} allows half stars, and hovering previews the value you would pick.

It is a slider for keyboards and screen readers: Left / Right or Up / Down change it by one step, Home clears it and End gives the maximum. readOnly shows a score, such as an average review, without letting it change.

color colors the filled icons: default, warning (the usual gold), danger, success, info, or any CSS color.

3 of 5

2.5 of 5

Props

valuenumber
Current rating, 0 to max (controlled).
defaultValuenumber
Default: 0
Initial rating when uncontrolled.
onChange(value: number) => void
Receives the new rating; clicking the current one clears it.
maxnumber
Default: 5
Number of icons.
precision1 | 0.5
Default: 1
Whole icons, or half icons too.
readOnlyboolean
Default: false
Show the rating without letting it change.
disabledboolean
Default: false
Dim it and ignore input.
size'sm' | 'md' | 'lg'
Default: 'md'
Icon size.
labelstring
Default: 'Rating'
Accessible name.
iconReactNode
Icon used for every position (default a star, filled when active).
color'default' | 'warning' | 'danger' | 'success' | 'info' | string
Default: 'default'
Color of the filled icons: a theme color or any CSS color (#e11d48, royalblue).
classNamestring
Default: ''
Extra classes for the root element.

Rating props
Prop	Type	Default	Description
`value`	number	–	Current rating, 0 to `max` (controlled).
`defaultValue`	number	`0`	Initial rating when uncontrolled.
`onChange`	(value: number) => void	–	Receives the new rating; clicking the current one clears it.
`max`	number	`5`	Number of icons.
`precision`	1 \| 0.5	`1`	Whole icons, or half icons too.
`readOnly`	boolean	`false`	Show the rating without letting it change.
`disabled`	boolean	`false`	Dim it and ignore input.
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Icon size.
`label`	string	`'Rating'`	Accessible name.
`icon`	ReactNode	–	Icon used for every position (default a star, filled when active).
`color`	'default' \| 'warning' \| 'danger' \| 'success' \| 'info' \| string	`'default'`	Color of the filled icons: a theme color or any CSS color (`#e11d48`, `royalblue`).
`className`	string	`''`	Extra classes for the root element.