Form Number

Form number component.

Form Number, Personalization Blocks

Example:

TallStackUi::personalize()
    ->form('number')
    ->block('block', 'classes');

# Basic Usage

<x-number />

# Label & Hint

Quantity

Press the plus button to increase one by one

<x-number label="Quantity" hint="Press the plus button to increase one by one" />

# Min & Max Control

Quantity

Press the plus button to increase one by one

<x-number min="2" max="5" />

# Centralized

<x-number centralized />

# Selectable

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

<x-number selectable />

# Delay Control

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.

# Chevron Icons

An option to use other icons instead of defaults.

<x-number chevron />

# Step

An option to increase/decrease for specific quantities.

<x-number step="5" />

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.