Rating

Rating component is a star based selection input.


import { Rating } from 'primereact/rating';


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/rating/rating.min.js"></script>

Rating is used a controlled input component with value and onChange properties.


<Rating value={value} onChange={(e) => setValue(e.value)} />

Number of stars to display is defined with stars property, default is 5.


<Rating value={value} onChange={(e) => setValue(e.value)} stars={5} />

A cancel icon is displayed to reset the value by default, set cancel as false to remove this option.


<Rating value={value} onChange={(e) => setValue(e.value)} cancel={false} />

Custom icons are used to override the default icons with onIcon, offIcon and cancelIcon properties.


<Rating value={value} onIcon="pi pi-circle-fill" offIcon="pi-circle" onChange={(e) => setValue(e.value)} />

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
value	number	null	Value of the rating.
disabled	boolean	false	When present, it specifies that the element should be disabled.
readOnly	boolean	false	When present, changing the value is not possible.
style	object	null	Inline style of the component.
className	string	null	ClassName of the component.
stars	number	5	Number of stars.
cancel	boolean	true	When specified a cancel icon is displayed to allow removing the value.
cancelIcon	string	pi pi-ban	ClassName of the cancel icon component.
cancelIconProps	object	null	Properties of the cancel icon.
onIcon	string	pi pi-star-fill	ClassName of the on icon component.
offIcon	string	pi pi-star	ClassName of the off icon component.
onIconProps	object	null	Properties of the on icon.
offIconProps	object	null	Properties of the off icon.
tooltip	any	null	Content of the tooltip.
tooltipOptions	object	null	Configuration of the tooltip, refer to the tooltip documentation for more information.