Rating for Vue

Stars that record a score, or show one that is already set.

Use them when the scale is obvious and a glance is enough. Labeled choices belong in a Radio Group. In Vue, Ark UI changes the score from the arrow keys, half steps included.

Installation

Anatomy

Rating
├── RatingLabel
├── RatingItem
└── RatingControl

Usage

<script setup lang="ts">
import {
  Avatar, AvatarFallback, AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,
} from "@/components/ui/card";
import { Rating } from "@/components/ui/rating";
</script>

<template>
  <Card class="w-full max-w-xs">
    <CardHeader class="flex flex-col items-center gap-3 text-center">
      <Avatar size="lg">
        <AvatarImage alt="Driver" src="https://github.com/vinihvc.png" />
        <AvatarFallback>VV</AvatarFallback>
      </Avatar>
      <div>
        <CardTitle class="text-base">Vinicius Vicentini</CardTitle>
        <CardDescription> Tuestday morning at Mercado N.89</CardDescription>
      </div>
    </CardHeader>
    <CardContent class="space-y-2 text-center">
      <p class="font-medium text-sm">Rate your driver</p>
      <Rating />
    </CardContent>
    <CardFooter>
      <Button class="w-full">Submit</Button>
    </CardFooter>
  </Card>
</template>

Accessibility

Demos

Controlled

The score is kept in state and passed back to the rating, and the line under the stars only checks whether that number is 5. Take control when the score drives something else, such as enabling submit once it is high enough. defaultValue is enough when the widget can hold the number and you only read it on submit.

Count

count is how many icons render, and this row is three, all selected. A shorter scale is the honest one when five stars would be false precision, as with bad, fine, and good. Leave the default of five for reviews people already know how to read. The value is still a number, and it should not be asked to mean more than count.

Custom Color

The icons paint with the current text color, so a text utility on the root recolors the empty and filled marks together. Info and success are the two shown, against the warning color the component starts with. Change it when the score means a status, or when that gold fights the page. Prefer a semantic token to a one-off palette class.

Custom Icon

icon replaces the star. Here it is a heart, allowHalf is on, and text-destructive keeps the marks from looking like a warning. Swap the icon when stars are the wrong metaphor, a favorite rather than a quality score. The empty and filled layers both use that icon, so it still has to read when it is only an outline.

Custom Size

There is no size prop. A class on the root targets the rating-item-indicator slot and scales it past the default star. Make the icons larger when this is the main control on a phone and the default is a fiddly tap. Shrink them beside a quote so the sentence stays the point, which the testimonial further down does.

Disabled

disabled blocks input and fades the icons, which fits a score that would only be a guess, such as before the trip has ended. The value can still be set. It cannot be changed, including from the keyboard. A published score that should look normal and stay fixed wants readOnly instead.

Half Star

allowHalf lets the pointer and the arrow keys stop between icons, so the value can sit halfway instead of on a whole star. Use it for an average, where that half step is a real difference. Turn it off on a personal rating if the smaller target is harder to hit than it is worth. This row starts between stars through defaultValue.

Readonly

readOnly shows the score and ignores pointer and keyboard changes, without fading the icons. That is a published average or a product rating, a number the reader did not just choose. disabled is the treatment that looks unavailable. If the icons are the only place the number exists, write it out in text beside them.

Testimonial

Five stars, readOnly, drawn smaller, sitting over a quote and a name. That is a marketing card rather than a form, and the smaller indicators keep the stars from outshouting the sentence. Drop readOnly when the reader should leave their own score. The opening preview is that form, and this card is only the quote.

FAQ

API Reference