Rating

Rating is a radio-group control for bounded scores. It supports fractional steps, hover previews, clearable values, RTL, vertical navigation, native validation, and custom slots.

Use Meter to display a read-only score.

Anatomy

• #item: Replaces one complete rating item and receives fill percentage and state.
• #empty: Empty visual rendered inside each default item.
• #filled: Filled visual clipped inside each default item.
• #radio: Optional content inside each transparent fractional radio target.
• #state: Optional renderless output with committed, preview, hover, and item state.

The component generates accessible radio buttons over each visual item. Keep those controls mounted when replacing visuals through slots.

Usage

<script setup lang="ts">
import { Rating } from "akaza-ui";
import { ref } from "vue";

const rating = ref(3.5);
</script>

<template>
  <Rating v-model="rating" :step="0.5" hoverable clearable />
</template>

Examples

Fractional rating

Set step below 1 to expose fractional radio values. Akaza supports the Reka-compatible values 0.5, 0.25, and 0.1, plus other positive values up to 1.

<template>
  <Rating v-model="rating" :step="0.25" />
</template>

Clearable and hoverable

hoverable previews the pointer value without committing it. clearable resets the current value to 0 when selected again.

<template>
  <Rating v-model="rating" hoverable clearable />
</template>

Custom length and labels

Change the number of items and provide localized value text with getValueLabel.

<template>
  <Rating
    v-model="rating"
    :length="10"
    :get-value-label="(value, max) => `${value} points out of ${max}`"
  />
</template>

Read-only and disabled

Read-only ratings remain perceivable and focusable but reject changes. Disabled ratings are removed from interaction and native form submission.

<template>
  <Rating :model-value="4" read-only aria-label="Average rating" />
  <Rating :model-value="2" disabled aria-label="Unavailable rating" />
</template>

Field and native forms

Inside Field, Rating inherits label, name, required, disabled, and error metadata. Required validation treats 0 as empty.

<template>
  <Field label="Service rating" name="rating" required>
    <Rating v-model="rating" />
  </Field>
</template>

Fractional values

Rendering, normalization, keyboard navigation, and submission use the same legal value grid. Arbitrary steps such as 0.3 are supported; the terminal maximum remains selectable even when the step does not divide it evenly. An accepted nonzero value corresponds to a rendered checked radio.

Default star content is replaceable through #empty and #filled. Provide visual sizes and colors through ui; custom artwork belongs in those slots.

Native Form Reset

A native form reset restores the initial model and clears interaction state. Calling preventDefault() on the reset event preserves the current value. Reset updates v-model without emitting value-change.

API Reference

Model

Props

Emits

Slots

Methods

UI Options

Styling Hooks

Plain class applies to the radio-group root. Use item/fill/radio UI keys for custom rating visuals.

Keyboard