Vitral 0.2
Form

Rating

Stars to rate with, in whole steps or in halves and quarters, cleared by choosing the same star again.

WAI-ARIA tested

Import

main.ts
import { Rating } from '@vitral/vue';

Basic

Your rating
Value: 3
<script setup lang="ts">import { Rating, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const score = ref<number | null>(3);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <span id="rating-label">Your rating</span>        <Rating v-model="score" aria-labelledby="rating-label" />        <small style="color: var(--vt-text-muted-color)">Value: {{ score ?? 'none' }}</small>    </StackPanel></template>

Half stars

A step of 0.5. Press the left half of a star for the half, the right half for the whole; the arrows move by the step.

How was it?
Value: 3.5
<script setup lang="ts">import { Rating, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const half = ref<number | null>(3.5);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <span id="rating-half">How was it?</span>        <Rating v-model="half" :step="0.5" aria-labelledby="rating-half" />        <small style="color: var(--vt-text-muted-color)">Value: {{ half ?? 'none' }}</small>    </StackPanel></template>

Quarters

Any step divides the star: the filled one is drawn over the empty one and clipped to the fraction, so there is no half-drawn glyph to keep.

Precision
Value: 4.25
<script setup lang="ts">import { Rating, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const quarter = ref<number | null>(4.25);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <span id="rating-quarter">Precision</span>        <Rating v-model="quarter" :step="0.25" aria-labelledby="rating-quarter" />        <small style="color: var(--vt-text-muted-color)">Value: {{ quarter ?? 'none' }}</small>    </StackPanel></template>

An average, read-only

What a rating is most often for: a number that is not a whole star and was never chosen by this reader.

4.3 out of 5, from 1,284 reviews
<script setup lang="ts">import { Rating, StackPanel } from '@vitral/vue'; const average = 4.3;</script> <template>    <StackPanel orientation="horizontal" spacing="0.625rem" align="center" wrap>        <Rating :model-value="average" :step="0.1" readonly aria-label="Average rating" />        <small style="color: var(--vt-text-muted-color)">{{ average }} out of 5, from 1,284 reviews</small>    </StackPanel></template>

More stars, other icons

<script setup lang="ts">import { Rating } from '@vitral/vue';import { ref } from 'vue'; const ten = ref<number | null>(7);</script> <template>    <Rating v-model="ten" :stars="10" on-icon="circle" off-icon="circle" :clearable="false" aria-label="Score out of ten" /></template>

Read-only and disabled

<script setup lang="ts">import { Rating } from '@vitral/vue';</script> <template>    <Rating :model-value="4" readonly aria-label="Average rating" />    <Rating :model-value="2" disabled aria-label="Disabled rating" /></template>

API

Read from packages/vue/src/components/Rating/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
starsnumberHow many stars. Defaults to 5.
stepnumberThe smallest change: `1` whole stars, `0.5` halves, `0.25` quarters. A whole-star rating is a radio group of stars, which is what it is; a fractional one is a slider, because half a star is not an option in a list, it is a position on a scale.
clearablebooleanA press on the chosen star clears the rating, and the arrow keys can reach zero. Defaults to true.
readonlyboolean—
disabledboolean—
invalidboolean—
onIconIconPropThe icon of a chosen star. Defaults to a filled star.
offIconIconPropThe icon of a star not chosen. Defaults to an outlined star.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
changeevent: { originalEvent: Event; value: number | null }—
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NameSlot propsDescription
onicon(props: { value: number })—
officon(props: { value: number })—

Used in these templates