mds components
mds:quantity
A cart quantity stepper.
2
<mds:quantity :value="2" :min="1" :max="5" name="qty" />Sizes
1
2
3
<div class="flex items-center gap-4">
<mds:quantity :value="1" size="sm" />
<mds:quantity :value="2" />
<mds:quantity :value="3" size="lg" />
</div>Bounds and step
The buttons disable themselves at the bounds.
1
10
<div class="flex items-center gap-4">
<mds:quantity :value="1" :min="1" :max="3" />
<mds:quantity :value="10" :step="5" :min="5" :max="50" />
</div>With Livewire
The hidden input always holds Latin digits, whatever the display shows — so the value that reaches your component is a number, not a Persian string.
2
<mds:quantity wire:model.live="quantity" :min="1" :max="10" />Persian output
config('mds.persian_digits') — on by default in a real app, off in these docs — switches the displayed digits and the built-in strings to Persian: the buttons are labeled افزایش تعداد and کاهش تعداد for screen readers. :fa="true" does it for a single stepper.
۲
<mds:quantity :value="2" :min="1" :max="10" :fa="true" />Reference
mds:quantity
| Prop | Description |
|---|---|
| value | Starting quantity. |
| min | Lower bound. Default: 1. |
| max | Upper bound. |
| step | Increment. Default: 1. |
| size | Options: sm, lg. |
| name | Field name for a plain form. |
| fa | Persian digits and built-in strings. Default: config('mds.persian_digits'). |
| increment-label | Accessible label for the plus button. Default: "Increase quantity", or افزایش تعداد in Persian. |
| decrement-label | Accessible label for the minus button. Default: "Decrease quantity", or کاهش تعداد in Persian. |
| wire:model | Binds to a Livewire property. |