Components

Number Input

A numeric stepper with minus/plus buttons that clamp a value to an optional min, max and step.

php artisan blatui:add number-input

<x-ui.number-input name="quantity" :value="1" class="w-40" />

Disabled

<x-ui.number-input name="quantity" :value="3" :disabled="true" class="w-40" />

Min Max

<x-ui.number-input name="guests" :value="2" :min="1" :max="10" class="w-40" />

Sizes

<div class="flex flex-col items-start gap-4">
    <x-ui.number-input name="qty-sm" size="sm" :value="1" class="w-36" />
    <x-ui.number-input name="qty-default" size="default" :value="1" class="w-40" />
    <x-ui.number-input name="qty-lg" size="lg" :value="1" class="w-44" />
</div>

Step

<x-ui.number-input name="rate" :value="2.5" :step="0.5" :min="0" class="w-40" />