Number Input

x-number-input

A numeric field with minus/plus steppers that respect min, max, and step — works with wire:model and keyboard arrows.

php artisan components:add number-input

Playground

label placeholder disabled

Examples

Quantity & precision

Whole-number quantities, decimal steps, and a disabled state.

<div class="mx-auto flex w-full max-w-md flex-col gap-6">
    <div class="max-w-40">
        <x-components.number-input label="Quantity" value="2" min="0" max="10" />
    </div>
    <div class="max-w-40">
        <x-components.number-input label="Price" value="19.5" step="0.5" min="0" />
    </div>
    <div class="max-w-40">
        <x-components.number-input label="Seats (sold out)" value="0" disabled />
    </div>
</div>

Props

Prop	Type	Default	Description
`label`	text	`—`	Label text rendered above the field.
`min`	number	`—`	Lowest allowed value.
`max`	number	`—`	Highest allowed value.
`step`	number	`1`	Amount each press changes the value by.
`value`	number	`—`	Initial value.
`placeholder`	text	`—`	Placeholder shown while empty.
`disabled`	boolean	`false`	Disable the field and both steppers.

Works with

`components:add number-input` pulls these in automatically.

x-label Label