Laravel Number Input Component

Free · MIT

A numeric field with stepper buttons, bounds, and no accidental changes from the scroll wheel.

A Number Input built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::number-input>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::number-input name="qty" label="Quantity" :min="1" :max="99" />

See the full API, props and live examples in the Number Input documentation.

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.

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