Rating

Headless rating input with hover preview, keyboard navigation, and half-step support.

Copy Markdown

PreviewRenders elementIntermediate Apr 17, 2026

Usage

Rating supports whole and half-star modes. Items expose their state via data attributes for CSS-only styling.

Anatomy

vue

<script setup lang="ts">
  import { Rating } from '@vuetify/v0'
</script>

<template>
  <Rating.Root>
    <Rating.Item />

    <Rating.HiddenInput />
  </Rating.Root>
</template>

Accessibility

Keyboard

Key	Action
ArrowRight / ArrowUp	Increment by step (1 or 0.5)
ArrowLeft / ArrowDown	Decrement by step
Home	Set to 0
End	Set to size

Rating.Root provides role="slider" with aria-valuenow, aria-valuemin, aria-valuemax, and aria-valuetext (e.g. “3 out of 5”). When disabled or readonly, the corresponding aria-disabled and aria-readonly attributes are set.

Data Attributes

Root:

Attribute	Description
`data-disabled`	Present when disabled
`data-readonly`	Present when readonly
`data-hovering`	Present during hover

Item:

Attribute	Values	Description
`data-state`	`full` \| `half` \| `empty`	Fill state
`data-highlighted`	present/absent	Within hover range
`data-disabled`	present/absent	Inherited from root
`data-readonly`	present/absent	Inherited from root

Slot into Rating.Item and use the state slot prop to choose your icon:

vue

<template>
  <Rating.Item :index="i" v-slot="{ state }">
    <StarFull v-if="state === 'full'" />
    <StarHalf v-if="state === 'half'" />
    <StarEmpty v-if="state === 'empty'" />
  </Rating.Item>
</template>

Use the readonly prop. The value displays but cannot be changed:

vue

<template>
  <Rating.Root :model-value="3.5" readonly half>
    <Rating.Item v-for="i in 5" :key="i" :index="i" />
  </Rating.Root>
</template>

Set the name prop on Root. A hidden input is auto-rendered with the current value:

vue

<template>
  <Rating.Root v-model="rating" name="review-rating">
    <Rating.Item v-for="i in 5" :key="i" :index="i" />
  </Rating.Root>
</template>

API Reference

The following API details are for all variations of the Rating component.