Rating

Usage

v-model is a plain number between 0 and length (5 by default):

<script setup lang="ts">
const value = ref(3)
</script>

<template>
  <SRating v-model="value" aria-label="Rate your experience" />
</template>

Half-star precision

step sets how fine-grained a single star's own value can be - one of 1 (default), 0.5, 0.25, or 0.1. 0.5 splits each star into a left (half) and right (whole) half, each its own clickable region:

<SRating v-model="value" :step="0.5" />

Clearable

Clicking the currently-selected star again resets the value to 0:

<SRating v-model="value" clearable />

Sizes

<SRating :default-value="4" size="lg" />

Color

<SRating :default-value="4" color="success" />

Read-only display

disabled blocks interaction entirely - paired with a fractional model-value/step, this is the same component used purely to display a rating (an average review score, for one), not just collect one:

<SRating :model-value="4.5" :step="0.5" disabled aria-label="4.5 out of 5" />

Vertical

<SRating v-model="value" orientation="vertical" />

Forms integration

Wrap it in FormField to get id/name/invalid and aria-describedby wired up automatically - invalid falls back to FormField's own state when not set directly on the rating, and size does the same.

Custom :ui

To see exactly what you'd be overriding - the current default classes for every slot and variant - here's Rating's own theme file:

Props

Events