New version 1.30.0 is now available 🎉 Introducing a useful command to search for component usage.

Powerful suite of Blade components for TALL Stack apps.

Form Number

>= v1.2

Form number component.

<x-number />
Press the plus button to increase one by one
<x-number label="Quantity"
hint="Press the plus button to increase one by one" />
Press the plus button to increase one by one
<x-number min="2" max="5" />
<x-number centralized />

An option to do not allow the interaction with the input.

<x-number selectable />

An option to control the velocity to increase/decrease when pressing buttons

<x-number delay="1" min="1" max="10" />

The delay calculation happens as delay * 100.

An option to use other icons instead of defaults.

<x-number chevron />

An option to not show validation error message.

<x-number label="Quantity" invalidate />

Although the number component can be used with and wire:model.blur , due to the way Livewire works, we recommend that you use it with wire:model to avoid value synchronization issues between the component and the Livewire updates.

Code highlighting provided by Torchlight