Rating

Import

import { Rating } from "@dr-max/ui/rating"

The entry carries its own precompiled CSS (including the styles of the Icon part it composes) — no extra style imports needed.

Usage

The value is a number on a 0–5 scale (clamped), and fractional values render a partially filled star:

<script setup lang="ts">
import { Rating } from "@dr-max/ui/rating"
</script>

<template>
  <Rating :value="4" />
  <Rating :value="3.5" />
  <Rating :value="0" />
</template>

Disabled

<template>
  <Rating :value="3.5" disabled />
</template>

Label

The accessible label defaults to "<value> out of 5 stars" — pass label to provide more context:

<template>
  <Rating :value="4.5" label="Product rated 4.5 out of 5 stars by 128 customers" />
</template>

Playground

<script setup lang="ts">
import { Rating } from '@dr-max/ui/rating'
</script>

<template>
  <Rating :value="3.5" />
</template>