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

Building a cart or product quantity stepper? Use number-input with :min="1" and a compact size="sm" — see the Quantity selector example below. (A separate quantity-selector component was removed in favour of this; it was the same control with different defaults.)

<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" />

Quantity Selector

{{-- A cart / product quantity stepper: number-input with a floor of 1 and a
     compact footprint. Replaces the former standalone quantity-selector. --}}
<x-ui.number-input name="quantity" :value="1" :min="1" :max="10" step="1" size="sm" class="w-32" />

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" />

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php

use Livewire\Component;

class Demo extends Component
{
    public int $qty = 1;

    public function render()
    {
        return view('livewire.demo');
    }
}

resources/views/livewire/demo.blade.php

<x-ui.number-input wire:model="qty" :min="1" />

API Reference

Props, slots and exposed methods for <x-ui.number-input>.

Props

Prop	Type	Default	Description
`name`	`string`	—	Name of the underlying input, used for form submission and as the fallback accessible label.
`value`	`number`	`0`	Initial numeric value. Pass null or an empty string to start the field empty.
`min`	`number`	—	Lowest allowed value. Clamps on blur and disables the decrease button at the floor.
`max`	`number`	—	Highest allowed value. Clamps on blur and disables the increase button at the ceiling.
`step`	`number`	`1`	Amount each increase/decrease button adds or subtracts.
`size`	`string`	`'default'`	Control height and text size; matches the input component so fields line up in a form. `sm` `default` `lg`
`disabled`	`bool`	`false`	Disables the field and both stepper buttons.
`id`	`string`	—	id attribute of the underlying input, for associating an external label.
`placeholder`	`string`	—	Placeholder shown while the field is empty.