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 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 wire:model.live 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.

Previous
Form Textarea

Code highlighting provided by Torchlight