Rating

Star rating input and display, with optional half-star precision and readonly mode.

ExamplesCodeUsageChangelog

Interactive

Click a star to set the rating. Hover previews the value before committing.

Tailwind v4

<Rating v-model="score" />

Readonly display

Pass readonly to render a non-interactive display.

Tailwind v4

<Rating :modelValue="score" :readonly="true" />

Sizes

Tailwind v4

<Rating v-model="score" size="sm" />
<Rating v-model="score" size="md" />
<Rating v-model="score" size="lg" />

Custom max

Tailwind v4

<Rating v-model="score" :max="10" />

Half-star precision

Set allowHalf to enable 0.5 increments. Hover over the left half of a star to preview the half value.

Tailwind v4

<Rating v-model="score" :allowHalf="true" />

With count label

Compose Rating with text to show a review count alongside the stars.

4.5 (128 reviews)

Tailwind v4

<div style="display:flex;align-items:center;gap:8px">
  <Rating :modelValue="score" :allowHalf="true" :readonly="true" size="sm" />
  <span>{{ score }} ({{ reviewCount }} reviews)</span>
</div>

Keyboard navigation

When interactive, the component responds to ArrowRight / ArrowUp (increase) and ArrowLeft / ArrowDown (decrease). Focus the rating group and use arrow keys.

Props

Prop	Type	Default	Description
modelValue	number	—	Current rating (use with v-model)
max	number	5	Number of stars
size	'sm' | 'md' | 'lg'	'md'	Star size (16 / 24 / 32 px)
readonly	boolean	false	Disables interaction and hover effects
allowHalf	boolean	false	Enable 0.5-increment half-star values

Events

Event	Payload	Description
update:modelValue	number	Emitted when a star is clicked