Rating

Star rating input; can be read-only for display. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

import { UiRating } from '@ziyarago/ui/vue'

Interactive

Vue

<UiRating v-model="value" />

Read only

Vue

<UiRating v-model="value" readonly />

Large, 10 stars

Vue

<UiRating v-model="value" :max="10" :size="24" />

Sizes

Vue

<UiRating size="xs" v-model="value" />

<UiRating size="sm" v-model="value" />

<UiRating size="md" v-model="value" />

<UiRating size="lg" v-model="value" />

<UiRating size="xl" v-model="value" />

API reference

Star rating input. Use for reviews and quick feedback.

Props

PropType and valuesDefaultDescription

modelValuev-modelnumber0Number of filled stars.

maxnumber5Number of stars.

readonlybooleanfalseDisables the stars, for display only.

labelstring'Rating'Accessible name of the group (not rendered visibly).

sizexssmmdlgxl'md'Star size: 14, 18, 20, 26 or 32 px. A number is used as the pixel size directly.

Events

Vue: @name. React: onName.

changeCalled with the clicked star count (1..max). Clicking the current value does not reset it.