Vue Rating Component API

Rating API

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

On this page

CRating

jsx
import { CRating } from '@coreui/vue-pro'

Props

PropertyDefaultType
allowClear-boolean

Enables the clearing upon clicking the selected item again.

disabled-boolean

Toggle the disabled state for the component.

highlightOnlySelected-boolean

If enabled, only the currently selected icon will be visibly highlighted.

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.

modelValue-number

The default name for a value passed using v-model.

name-string

The name attribute of the radio input elements.

precision1number

Minimum increment value change allowed.

readOnly-boolean

Toggle the readonly state for the component.

size-string

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.

Events

Event name
change

Execute a function when a user changes the selected element.

  • valuenumber | null
hover

Execute a function when a user hover the element.

  • valuenumber | null
update:modelValue

Emit the new value whenever there’s a change event.