Form Number

>= v1.2

Form number component.

Number, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

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

The soft personalization should be done in boot method of service providers.

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

# Invalidate

An option to not show validation error message.

Quantity

<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.