juxt.ui

Forms

Rating

A row of stars for rating something, or for showing an already-rated value. Editable by default; add `readonly` to only display it.

Copy
<script setup lang="ts">
const rating = ref(3)
</script>

<template>
  <JRating v-model="rating" label="Rate this product" />
</template>

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

Copy
import { JRating } from '@juxtui/ui'

Usage #

Copy
<JRating v-model="rating" label="Rate this product" />

Set readonly to show a static value, e.g. an average — pair it with allow-half for half-star precision. Editing is always whole stars.

Variants & examples #

Read-only average#

allow-half only takes effect in readonly mode.

3.5 out of 5
Copy
<script setup lang="ts">
const average = ref(3.5)
</script>

<template>
  <div class="flex items-center gap-2">
    <JRating :model-value="average" readonly allow-half />
    <span class="text-sm text-fg-secondary">{{ average }} out of 5</span>
  </div>
</template>

Sizes#

Copy
<script setup lang="ts">
const sm = ref(4)
const md = ref(4)
const lg = ref(4)
</script>

<template>
  <div class="flex flex-col gap-3">
    <JRating v-model="sm" size="sm" />
    <JRating v-model="md" size="md" />
    <JRating v-model="lg" size="lg" />
  </div>
</template>

API #

Props

PropTypeDefault Description
modelValuenumber0Bound with v-model.
maxnumber5Number of stars.
readonlybooleanfalseStatic display mode — no interaction, ideal for showing an average.
disabledbooleanfalseDisables editing.
size'sm' | 'md' | 'lg''md'Star size.
labelstring—Accessible name for the group, e.g. “Rate this product”. Defaults to a description of the current value in readonly mode.
allowHalfbooleanfalseAllow half-star precision. Only applies in readonly mode.

Events

EventPayload Description
update:modelValuenumberEmitted when a star is chosen.

Accessibility #

  • Editable mode is role="radiogroup" with one role="radio" star per value, exposing aria-checked and a roving tabindex so only one star sits in the tab order.
  • Read-only mode instead renders role="img", labelled with a summary of the value, e.g. “4 out of 5 stars”.
  • Fill is drawn by width on an inner element, not colour alone, and the accessible name always carries the number.

Keyboard #

Key Action
→↑Increases the rating by one star.
←↓Decreases the rating by one star.
HomeClears the rating to zero.
EndSets the rating to `max`.