Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Rating

An interactive star rating control. Requires Alpine.js.

Usage
example.blade.php 
<x-slate::rating :value="3" label="Rate this article" />

Custom max
example.blade.php 
<x-slate::rating :value="4" :max="10" name="score" />

Readonly

Use readonly for aggregate scores that should not be edited.

example.blade.php 
<div class="space-y-4">
    <x-slate::rating :value="5" readonly label="Average rating" />
    <x-slate::rating :value="2" readonly label="Support response" />
</div>

In a review card
Leave a review
How was your experience?
example.blade.php 
<x-slate::card class="max-w-sm">
    <x-slate::card-header>
        <x-slate::card-title>Leave a review</x-slate::card-title>
        <x-slate::card-description>How was your experience?</x-slate::card-description>
    </x-slate::card-header>
    <x-slate::card-content class="space-y-4">
        <x-slate::rating :value="4" name="rating" label="Overall" />
        <x-slate::textarea label="Comments" rows="3" placeholder="Optional feedback…" />
    </x-slate::card-content>
    <x-slate::card-footer class="justify-end">
        <x-slate::button size="sm">Submit</x-slate::button>
    </x-slate::card-footer>
</x-slate::card>
Last updated .