Skip to main content
The NumberInput component provides an accessible number input with plus/minus buttons. It includes a labeled wrapper and a raw version for more control.

​
Import

import { NumberInput, NumberInputRaw } from '@luminescent/ui-qwik';

​
Usage

<NumberInput
  id="quantity"
  value={quantity.value}
  min={0}
  max={100}
  step={1}
  input
  onIncrement$={(e, btn, input) => {
    quantity.value = parseInt(input?.value || '0');
  }}
  onDecrement$={(e, btn, input) => {
    quantity.value = parseInt(input?.value || '0');
  }}
>
  Quantity
</NumberInput>

​
NumberInput Props

​
id
string
required
HTML id for the input field and label association.
​
value
number
default:"0"
The current numeric value.
​
min
number
Minimum allowed value. Decrement button is disabled when value reaches min.
​
max
number
Maximum allowed value. Increment button is disabled when value reaches max.
​
step
number
default:"1"
The amount to increment/decrement by.
​
input
boolean
When true, displays a text input field between the buttons. When false, only shows increment/decrement buttons.
​
onIncrement$
QRL<(event, element, inputElement?) => void>
required
Callback fired when the increment button is clicked. Receives the event, button element, and optionally the input element if input is true.
​
onDecrement$
QRL<(event, element, inputElement?) => void>
required
Callback fired when the decrement button is clicked. Receives the event, button element, and optionally the input element if input is true.
​
class
{ [key: string]: boolean }
Object-based class names for conditional styling.
​
...props
PropsOf<'input'>
All standard HTML input attributes are supported (except type and standard class).

​
Examples

<NumberInputRaw
  value={score.value}
  onIncrement$={() => score.value++}
  onDecrement$={() => score.value--}
/>

​
Behavior

When input is true, the increment/decrement callbacks receive the input element as the third parameter. The component automatically calls stepUp() and stepDown() on the input element before firing the callbacks. Browser default spin buttons are hidden via CSS.

​
Accessibility

  • Buttons have aria-label attributes (“Increment” and “Decrement”)
  • Buttons are properly disabled when min/max limits are reached
  • Label is associated with input via for attribute
  • touch-manipulation prevents double-tap zoom on mobile
  • Number input has type=“number” for proper keyboard on mobile devices

Build docs developers (and LLMs) love

Get started for freeTalk to us