This is the Vuetify 3 documentation, examples and information may be broken or outdated.

Ratings

The v-rating component is a specialized but important piece in building user widgets. Collecting user feedback via ratings is a simple analytic that can provide a lot of feedback to your product or application.

Usage

The v-rating component provides a simple interface for gathering user feedback.

API

Examples

Props

Color

The v-rating component can be colored as you want, you can set both selected and not selected colors.

v-rating/prop-color.vue

Density

Control the space occupied by v-rating items using the density prop.

v-rating/prop-density.vue

Clearable

Clicking on a current rating value can reset the rating by using clearable prop.

v-rating/prop-clearable.vue

Readonly

For ratings that are not meant to be changed you can use readonly prop.

v-rating/prop-readonly.vue

Hover effect

TODO

v-rating/prop-hover.vue

Labels

The v-rating component can display labels above or below each item.

v-rating/prop-item-labels.vue

Icons

You can use custom icons.

v-rating/prop-icons.vue

Length

Change the number of items by modifying the the length prop.

v-rating/prop-length.vue

Half increments

The half-increments prop increases the granularity of the ratings, allow for .5 values as well.

v-rating/prop-half-increments.vue

Size

Utilize the same sizing classes available in v-icon or provide your own with the size prop.

v-rating/prop-size.vue

Aria Label

Provide a label to assistive technologies for each item.

v-rating/prop-icon-label.vue

Slots

Item slot

Slots enable advanced customization possibilities and provide you with more freedom in how you display the rating.

v-rating/slot-item.vue

Custom labels slot

Any arbitrary content could be displayed for labels in item-label slot.

v-rating/slot-item-label.vue

Misc

Card ratings

The rating component pairs well with products allowing you to gather and display customer feedback.

v-rating/misc-card.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.