Skip to main content

​
Usage

The VRating component is used to gather user feedback through a star rating interface. 
<template>
  <v-rating v-model="rating" />
</template>

<script setup>
import { ref } from 'vue'
const rating = ref(3)
</script>

​
Custom Length

Change the number of rating items: 
<template>
  <v-rating
    v-model="rating"
    length="10"
  />
</template>

​
Half Increments

Allow half-star ratings: 
<template>
  <v-rating
    v-model="rating"
    half-increments
  />
</template>

​
Custom Icons

Use custom icons for empty and filled states: 
<template>
  <v-rating
    v-model="rating"
    empty-icon="mdi-heart-outline"
    full-icon="mdi-heart"
    color="red"
  />
</template>

​
Hover Effect

Show preview on hover: 
<template>
  <v-rating
    v-model="rating"
    hover
  />
</template>

​
Item Labels

Add labels to rating items: 
<template>
  <v-rating
    v-model="rating"
    :item-labels="['Poor', 'Fair', 'Good', 'Very Good', 'Excellent']"
  />
</template>

​
Size and Density

Adjust the size: 
<template>
  <v-rating
    v-model="rating"
    size="large"
    density="compact"
  />
</template>

​
Props

​
modelValue
number | string
default:"0"
The v-model value of the component
​
length
number | string
default:"5"
The number of rating items to display
​
emptyIcon
IconValue
default:"$ratingEmpty"
The icon to display for empty rating items
​
fullIcon
IconValue
default:"$ratingFull"
The icon to display for filled rating items
​
halfIncrements
boolean
default:"false"
Allows half-star rating values
​
hover
boolean
default:"false"
Shows a hover preview of the rating
​
clearable
boolean
default:"false"
Clicking the current rating value will reset it to 0
​
color
string
Applies specified color to the control
​
activeColor
string
The color used for filled/active rating items
​
disabled
boolean
default:"false"
Removes the ability to click or change the rating
​
readonly
boolean
default:"false"
Makes the rating read-only
​
ripple
boolean
default:"false"
Applies the ripple directive
​
size
string | number
Sets the size of the rating icons
​
density
'default' | 'comfortable' | 'compact'
Adjusts the vertical spacing within the component
​
itemLabels
string[]
Array of labels to display above or below each rating item
​
itemLabelPosition
'top' | 'bottom'
default:"top"
Position of the item labels relative to the rating icons
​
itemAriaLabel
string
default:"$vuetify.rating.ariaLabel.item"
Aria label template for rating items
​
name
string
Sets the name attribute on the internal input elements

​
Slots

​
item
slot
Slot to customize individual rating item rendering
​
item-label
slot
Slot to customize item label content

​
Events

​
update:modelValue
event
Emitted when the rating value changes
The rating component supports keyboard navigation using arrow keys to increment or decrement the rating value.

Build docs developers (and LLMs) love

Get started for freeTalk to us