Star rating
Lets users give a rating with stars, or shows an existing rating. It is used with name in a plain form, with wire:model in Livewire and with x-model in Alpine; in read-only mode it only displays the rating.
Basic usage
Hovering over the stars shows a preview, and clicking selects the rating. value is the initial rating; label tells screen readers what the rating is about.
<acun:rating :value="3" label="Order satisfaction" />| Prop | Values |
|---|---|
value | Initial rating (integer) |
label | Screen reader name; default "Rating" |
Read-only
readonly draws a display that cannot be clicked; screen readers read the rating as "4 / 5". With fractional ratings, only whole stars are filled.
<div class="flex items-center gap-3">
<acun:rating :value="4" readonly />
<span class="text-sm text-gray-600 dark:text-zinc-400">4.0 · 128 reviews</span>
</div>| Prop | Values |
|---|---|
readonly | true | false |
Sizes
size sets the size of the stars; the default is md. sm suits table rows, and lg product or service headers.
<div class="flex flex-wrap items-center gap-8">
<acun:rating :value="4" readonly size="sm" />
<acun:rating :value="4" readonly />
<acun:rating :value="4" readonly size="lg" />
</div>| Prop | Values |
|---|---|
size | sm | md | lg |
Number of stars
max sets the number of stars shown; the default is 5.
<acun:rating :value="7" :max="10" readonly />| Prop | Values |
|---|---|
max | Number of stars |
In a form
When name is given, the component submits the selected rating with the form in a hidden field; if no rating is selected (0), the field is sent empty. In read-only mode, no hidden field is added.
<form method="POST" action="{{ route('orders.rate', $order) }}">
@csrf
<acun:rating name="rating" :value="old('rating', 0)" label="Order satisfaction" />
<acun:button type="submit" size="sm" class="mt-4">Submit</acun:button>
</form>| Prop | Values |
|---|---|
name | Name of the form field |
With Alpine
x-model binds the selected rating to an Alpine variable; if the variable changes from outside, the stars update as well.
<div x-data="{ rating: 3 }" class="flex items-center gap-3">
<acun:rating x-model="rating" label="Order satisfaction" />
<span class="text-sm text-gray-600 dark:text-zinc-400">Selected: <span x-text="rating"></span> / 5</span>
</div>| Prop | Values |
|---|---|
x-model | Alpine variable |
With Livewire
With wire:model, the selected rating is written to the Livewire property; with .live, it is sent to the server on every click. The rating is also kept in a hidden field named after the property, and a change event is dispatched on click, so acun:form dirty-check and acun:form-actions see the change.
<acun:rating wire:model.live="rating" label="Order satisfaction" />| Prop | Values |
|---|---|
wire:model | Livewire property |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
value | 0 | Initial rating |
max | 5 | Number of stars |
readonly | false | Read-only display |
size | md | sm · md · lg |
label | null | Screen reader name; default "Rating", in read-only mode "value / max" |
name | null | Field name for plain forms; the rating is sent in a hidden field (not in read-only mode) |