Rating

Star rating on native radios

A score out of a few — for someone to give one, or to show one. Stars are a coarse signal; for anything that needs a reason, pair them with a comment field.

Basic

Episode rating

★★★★★

★★★★★

Favourite

♥♥♥

Rating

★★★★★

3 / 5 · click the current star to clear

<script setup lang="ts">
import { ref } from "vue";
import { BlessRating } from "blessing-ui";
const stars = ref(3);
const love = ref(2);
</script>

<template>
  <div class="row">
    <BlessRating v-model="stars" label="Episode rating" />
    <BlessRating :model-value="4" readonly size="sm" />
    <BlessRating v-model="love" size="lg" icon="♥" :max="3" label="Favourite" />
    <BlessRating :model-value="1" disabled />
    <small>{{ stars }} / 5 · click the current star to clear</small>
  </div>
</template>

• Native radios: arrow keys choose; clicking the chosen star again clears it.
• readonly shows a score as one image named "Rating: 4 of 5". It is not a disabled control, so it isn't read as dimmed.
• name submits the value with a form; label names the group; icon changes the glyph.

Usage

import { BlessRating } from "blessing-ui";

API

Props

Name	Type	Default	Description
max	number	5
name	string	—
label	string	"Rating"
readonly	boolean	—
disabled	boolean	—
size	"md" | "sm" | "lg"	"md"
icon	string	"★"	glyph for each step
modelValue	number	0

Events

Name	Payload	Description
update:modelValue	[value: number]