Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add number-input

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::number-input> is a type="number" field with the details that a bare one gets wrong: visible stepper buttons, min/max/step wired through, and the scroll wheel disarmed.

Basic Usage

<div class="max-w-[200px]">
    <x-aura::number-input name="qty" label="Quantity" :value="1" :min="1" :max="99" />
</div>
<x-aura::number-input name="qty" label="Quantity" :min="1" :max="99" />

Props

Prop Type Default Description
label string|null null Field label.
min numeric|null null Lowest accepted value.
max numeric|null null Highest accepted value.
step numeric 1 Increment for the buttons and the arrow keys.
controls bool true Show the −/+ buttons.
hint string|null null Help text below the field.
error string|null null Error message; also sets aria-invalid.
size string 'md' sm, md, lg.

With Livewire

<x-aura::number-input
    wire:model.live="quantity"
    name="quantity"
    label="Quantity"
    :min="1"
    :max="$product->stock"
/>

Why the wheel is disabled

A focused type="number" field changes its value when the page scrolls past it. The user sees the page move; they do not see the quantity go from 1 to 14. It is a well-known way to submit a number nobody typed, so this component calls preventDefault on the wheel.

The arrow keys still step the value, which is the behaviour people actually reach for.

Accessibility

The −/+ buttons carry aria-label and sit outside the tab order. They duplicate what the arrow keys already do on a focused field; leaving them in would double the number of tab stops in every form that has one.

Errors are wired with aria-invalid and aria-describedby, and the message carries role="alert" so a validation failure is announced when it appears.