Skip to content

Overview

The <x-aura::rating> component renders a star-based rating input. It can be used as an interactive input or a readonly display. It supports configurable maximum stars, multiple sizes and color variants, and integrates with Alpine.js for reactivity.

Basic Usage

<x-aura::rating :value="3" />

Props

Prop Type Default Description
value int|float 0 Current rating value.
max int 5 Maximum number of stars.
size string 'md' Star size: sm, md, lg.
readonly bool false When true, stars are not interactive.
color string 'warning' Color variant: warning, primary, danger, success.

Variants / Examples

Interactive Rating

Selected: stars

<div x-data="{ rating: 0 }">
    <x-aura::rating x-model="rating" />
    <p class="mt-2 text-sm">Selected: <span x-text="rating"></span> stars</p>
</div>

Readonly Display

<x-aura::rating :value="5" :readonly="true" color="warning" />
<x-aura::rating :value="3" :readonly="true" color="primary" />
<x-aura::rating :value="1" :readonly="true" color="danger" />

Custom Max Stars

<x-aura::rating :value="7" :max="10" :readonly="true" />

Size Comparison

<x-aura::rating :value="4" size="sm" :readonly="true" />
<x-aura::rating :value="4" size="md" :readonly="true" />
<x-aura::rating :value="4" size="lg" :readonly="true" />

Accessibility

  • Each star renders as a button when interactive, with aria-label indicating its value.
  • In readonly mode, the component includes role="img" with an aria-label describing the rating (e.g., "3 out of 5 stars").
  • Keyboard navigation is supported in interactive mode using arrow keys.