React Rating Component API

Rating API

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

On this page

CRating

jsx
import { CRating } from '@coreui/react-pro'
PropertyDefaultType
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.

ariaLabel5.27.0+(value, itemCount) => `${value} of ${itemCount}`((value: number, itemCount: number) => string)

A function that returns the accessible label (aria-label) for each rating item's radio input. Receives the item's value and the total item count.

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.

itemCount5number

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 | null) => void)

Execute a function when a user changes the selected element.

onHover-((value: number | null) => void)

Execute a function when a user hover the element.

precision1number

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.