Rating

The VdRating component renders an interactive star-rating widget. Configure the maximum number of stars, pre-set a value, make it read-only, or pick a size variant — all through component props.

Basic 5-Star Rating
<VdRating v-model="rating" />
Pre-set Value (3 of 5)
3
<!-- rating = ref(3) → three stars filled on load -->
<VdRating v-model="rating" />
Read-Only
4
<!-- Display-only: not focusable, no hover/click -->
<VdRating :model-value="4" readonly />
Custom Max (10 Stars)
7
<!-- Ten stars instead of the default five -->
<VdRating v-model="rating" :max="10" />
Size Variants

Small

4

Default

4

Large

4
<!-- Small -->
<VdRating v-model="a" size="sm" />

<!-- Default -->
<VdRating v-model="b" />

<!-- Large -->
<VdRating v-model="c" size="lg" />
API Reference

Usage

<script setup lang="ts">
import { ref } from "vue";
import { VdRating } from "@vanduo-oss/vd3";
const value = ref(3);
</script>

<template>
  <VdRating v-model="value" :max="5" @change="onChange" />
</template>

CSS Classes

ClassDescription
.vd-ratingContainer wrapping the star elements
.vd-rating-starIndividual star element (filled or empty depending on value)
.vd-rating-readonlyAdded to the container when readonly; disables hover/click interactions
.vd-rating-smSmall size variant — rendered when the size prop is "sm"
.vd-rating-lgLarge size variant — rendered when the size prop is "lg"
.vd-rating-valueOptional text element displaying the numeric value (e.g. "4 / 5")

Component API

Prop / eventDescription
v-model (modelValue)Two-way bound rating value (number).
:maxNumber of stars (default 5).
:size'sm' | 'lg' size variant.
:readonlyDisplay-only, non-interactive when true.
@update:modelValue / @changeFired with the new value when the user picks a star.
Accessibility
  • The container has role="radiogroup" with an aria-label like "Rating: 3 out of 5"
  • Each star has role="radio" with aria-checked and aria-label (e.g. "3 stars")
  • ← / → arrow keys change the value; Home sets to 1; End sets to max
  • Read-only ratings use aria-readonly="true" and are not focusable
  • The widget is fully operable without a mouse via Tab + arrow keys