React Rating Component API

Rating API

New Year sale. Skyrocket your business in 2025!

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.

Get offer!

Explore the API reference for the React Rating component and discover how to effectively utilize its props for customization.

On this page

CRating#

import { CRating } from '@coreui/react-pro'
// or
import CRating from '@coreui/react-pro/src/components/rating/CRating'

Property	Default	Type
activeIcon#	-	`string`, `Element`, `Icon`
The default icon to display when the item is selected.
allowClear#	-	`boolean`
Enables the clearing upon clicking the selected item again.
className#	-	`string`
A string of all className you want applied to the component.
disabled#	-	`boolean`
Toggle the disabled state for the component.
highlightOnlySelected#	-	`boolean`
If enabled, only the currently selected icon will be visibly highlighted.
icon#	-	`string`, `Element`, `Icon`
The default icon to display when the item is not selected.
itemCount#	`5`	`number`
Specifies the total number of stars to be displayed in the star rating component. This property determines the scale of the rating, such as out of 5 stars, 10 stars, etc.
name#	-	`string`
The name attribute of the radio input elements.
onChange#	-	`(value: number) => void`
Execute a function when a user changes the selected element.
onHover#	-	`(value: number) => void`
Execute a function when a user hover the element.
precision#	`1`	`number`
Minimum increment value change allowed.
readOnly#	-	`boolean`
Toggle the readonly state for the component.
size#	-	`'sm'`, `'lg'`, `'custom'`
Size the component small, large, or custom if you define custom icons with custom height.
tooltips#	-	`boolean`, `string[]`
Enable tooltips with default values or set specific labels for each icon.
value#	-	`number`
The `value` attribute of component.