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

Component	Description
v-rating	Primary Component

Examples

Props

Color

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

Density

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

Clearable

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

Readonly

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

Hover effect

When using the hover prop, the rating icons will become a solid color and slightly increase its scale when the mouse is hovered over them.

Labels

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

Icons

You can use custom icons.

Length

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

Half increments

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

Size

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

Aria Label

Provide a label to assistive technologies for each item.

Slots

Item slot

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

Custom labels slot

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

Misc

Card ratings

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