Ratings

The rating component is a specialized but crucial 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


API

v-rating
Name
background-color
Default
'accent'
Type
string

The color used empty icons

Name
clearable
Default
false
Type
boolean

Add input clear functionality, default icon is Material Icons clear

Name
close-delay
Default
0
Type
number | string

Milliseconds to wait before closing component

Name
color
Default
'primary'
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
dense
Default
false
Type
boolean
Name
empty-icon
Default
'$vuetify.icons.ratingEmpty'
Type
string

The icon displayed when empty

Name
full-icon
Default
'$vuetify.icons.ratingFull'
Type
string

The icon displayed when full

Name
half-icon
Default
'$vuetify.icons.ratingHalf'
Type
string

The icon displayed when half (requires half-increments prop)

Name
half-increments
Default
false
Type
boolean

Allows the selection of half increments

Name
hover
Default
false
Type
boolean

Provides visual feedback when hovering over icons

Name
large
Default
false
Type
boolean

Makes the icon large (36px)

Name
length
Default
5
Type
number | string

The amount of ratings to show

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
medium
Default
false
Type
boolean

Makes the icon medium (28px)

Name
open-delay
Default
0
Type
number | string

Milliseconds to wait before opening component

Name
readonly
Default
false
Type
boolean

Removes all hover effects and pointer events

Name
ripple
Default
true
Type
boolean | object

Applies the v-ripple directive

Name
size
Default
undefined
Type
number | string

Specifies a custom font size for the icon

Name
small
Default
false
Type
boolean

Makes the icon small (16px)

Name
value
Default
0
Type
number

The rating value

Name
x-large
Default
false
Type
boolean

Makes the icon extra large (40px)

Examples

Size variantsNew in v1.2

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


Custom lengthNew in v1.2

Sometimes an application will call for a customized implementation. Easily change length or displayed icons.


IncrementedNew in v1.2

A rating can have 3 defined icons, full-icon, half-icon (with the half-increments prop) and empty-icon.


Scoped slotsNew in v1.2

A scoped slot is provided to give you even more freedom in how you display the rating.


Card ratingsNew in v1.2

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


Advanced usageNew in v1.2

The v-rating component fits right in with existing components. Build truly complex examples with rich features and beautiful designs.