mds components
mds:rating
A star rating, read-only or as an input.
Half stars are supported, and the review count comes along.
<mds:rating :value="4.3" :count="126" />Sizes
<div class="flex flex-wrap items-center gap-8">
<mds:rating :value="4.6" size="sm" />
<mds:rating :value="4.6" />
<mds:rating :value="4.6" size="lg" />
</div>Without the number
<div class="flex flex-wrap items-center gap-8">
<mds:rating :value="5" :count="12" />
<mds:rating :value="2.5" :show-value="false" />
</div>As an input
mds:rating.input is a real radio group under the hood, so it works in a plain form and with the keyboard. Its default group label follows the config language — "Rating" here, امتیاز in Persian.
<mds:rating.input name="score" :value="3" />Persian output
config('mds.persian_digits') — on by default in a real app, off in these docs — switches the value and count to Persian digits and the built-in labels to Persian; :fa="true" does it for a single rating.
<div class="flex flex-wrap items-center gap-8">
<mds:rating :value="4.3" :count="126" :fa="true" />
<mds:rating :value="3.7" :count="1205" :fa="true" />
</div>Reference
mds:rating
| Prop | Description |
|---|---|
| value | The rating. Default: 0. |
| max | Number of stars. Default: 5. |
| count | Review count shown after the stars. |
| size | Options: sm, lg. |
| show-value | Shows the numeric value. Default: true. |
| fa | Persian digits. Default: config('mds.persian_digits'). |
mds:rating.input
| Prop | Description |
|---|---|
| value | Pre-selected rating. |
| max | Number of stars. Default: 5. |
| name | Field name for a plain form. |
| size | Options: sm, lg. |
| label | Accessible group label. Default: "Rating", or امتیاز in Persian (follows the config). |
| reverse | Flips Arrow Left/Right. By default Right is always next, in RTL and LTR alike; set this when Right should follow the visual order of an RTL star row. |
| wire:model | Binds to a Livewire property. |