The number input component is a user-friendly element that offers a fresh perspective on the HTML number input. It is managed through a library provided by WireUI, which can also be used independently. This component simplifies the process of inputting numerical values and provides an enhanced experience for users.

The number input is user-friendly and offers a fresh perspective on the HTML number input component.

1<x-number label="How many Burgers?" placeholder="0" />

The number input accepts the html number input attributes, such as min , max , and step . These attributes allow you to set the minimum and maximum values, as well as the step value for the number input.

1<x-number min="5" max="10" step="0.2" label="How many Burgers?" value="6" />

We utilize a library directly from WireUI to manage the number input, and it can also be used independently. For further information about the x-hold directive, please visit this here .

1<div x-data="{ count: 0 }" class="flex items-center gap-x-3">
2    <x-button x-hold.click.repeat.200ms="count--" icon="minus" />
3 
4    <span class="bg-teal-600 text-white px-5 py-1.5 rounded-lg" x-text="count"></span>
5 
6    <x-button x-hold.click.repeat.200ms="count++" icon="plus" />
7</div>