A score out of five, given or shown.
Import it from rei-kit:
import { BaseRating } from 'rei-kit'
Open BaseRating in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { BaseRating } from 'rei-kit'
const score = ref(4)
</script>
<template>
<BaseRating
v-model="score"
label="Your rating"
:value-label="(value, max) => `${value} out of ${max}`"
/>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
max | number | 5 | |
label | string | yes | What is being rated: "Difficulty", "Your rating". Already translated. |
valueLabel | (value: number, max: number) => string | yes | The spoken value: `(value, max) => \`${value} out of ${max}\`.` |
readonly | boolean | false | Shows a score rather than asks for one. |
size | 'sm' | 'md' | 'lg' | 'md' | |
allowClear | boolean | true | Pressing the current score again clears it. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.