Rating

Accessible, unstyled native-radio rating control with controlled and uncontrolled state.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Rating } from "@vizejs/ui/rating";

Or copy the source into your project with vize lib pull rating (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Controlled five-star rating built from native radios with a clearable value. -->
<script setup lang="ts">
import { ref, useId } from "vue";

import { Rating } from "@vizejs/ui/rating";

const score = ref<number | null>(3);
const labelId = useId();
</script>

<template>
  <div>
    <span :id="labelId">Rate this recipe</span>
    <Rating v-model="score" name="recipe-score" clearable :aria-labelledby="labelId">
      <template #item="{ active }">{{ active ? "★" : "☆" }}</template>
    </Rating>
    <output>{{ score === null ? "Not rated" : `${score} of 5` }}</output>
  </div>
</template>

API

Rating

Source: src/families/form/rating/rating.vue

Props

Events

Slots

Behavior

Normative state x input -> outcome table for rating.vue (@vizejs/ui/rating). Every row is proven by the named mounted-DOM or SSR test; a row without a passing test is a contract violation.

Public Props

Emits, Slots, Expose

Extension Hooks

The subpath remains tree-shakable and retains no packaged CSS; those package contracts are pinned by distribution.test.ts, check:size, and check:tree-shaking.