Rating

Monochrome star rating form controls and read only star rating indicators with precise half star support.

Component Syntax

blade

<x-aura::rating wire:model="score" :max="5" />

1. Interactive Form Control

blade

Customer Satisfaction Score

<x-aura::flex direction="col" align="start" gap="2">
    <x-aura::label>
        Customer Satisfaction Score
    </x-aura::label>

    <x-aura::rating :rating="4" :max="5" name="user_feedback" size="lg" />
</x-aura::flex>

2. Read Only Review Score with Half Star

blade

4.5

(284 verified reviews)

<x-aura::flex align="center" gap="3">
    <x-aura::rating :rating="4.5" :max="5" :readonly="true" size="md" />

    <x-aura::text size="sm" weight="bold">
        4.5
    </x-aura::text>

    <x-aura::text size="xs" variant="subtle">
        (284 verified reviews)
    </x-aura::text>
</x-aura::flex>

3. Size Variations

blade

Small (sm):

Medium (md):

Large (lg):

Extra (xl):

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

Component Props

Available properties and configurations for the rating component.

Prop	Default	Available Values
rating	0	Numeric value (0 to max)
max	5	Positive integer
readonly	false	true false
size	md	sm md lg xl

Aura Wire

Component Library

Rating

Component Syntax

1. Interactive Form Control

2. Read Only Review Score with Half Star

3. Size Variations

Component Props

Switch

Upload

Aura Wire