Number Input

A numeric field with − and + buttons, limits and a step.

Stable

Web

iOS

Android

@advui/core

Source

Basic

Preview

Code

Guests

Up to 10 per booking.

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { Field, NumberInput } from '@advui/core'

<Field label="Guests">
  <NumberInput defaultValue={2} min={1} max={10} />
</Field>

Examples

Decimal step

Preview

Code

Weight (kg)

Value: 1.5

API reference

NumberInput

Also accepts Input props such as `invalid`, `placeholder` and `aria-label`.

Prop	Type	Default	Description
`value`	`number \| null`	—	`null` when the field is empty.
`defaultValue`	`number \| null`	`null`	Starting `value` when uncontrolled.
`onValueChange`	`(value: number \| null) => void`	—	Called when a valid number is typed or stepped.
`min`	`number`	—	Lowest value; typed values clamp on blur.
`max`	`number`	—	Highest value; typed values clamp on blur.
`step`	`number`	`1`	Amount added by the buttons and arrow keys.
`decrementLabel`	`string`	`'Decrease'`	Accessible name of the minus button.
`incrementLabel`	`string`	`'Increase'`	Accessible name of the plus button.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	As Input.

Accessibility

The field is a spinbutton with aria-valuenow, aria-valuemin and aria-valuemax.
The − and + buttons are disabled at the limits.
On web the buttons are skipped by Tab, because the arrow keys do the same from the field.

Keyboard interactions
Key	Action
`ArrowUp / ArrowDown`	Adds or removes one step.
`Home / End`	Jumps to `min` / `max` when set.

Platform notes

iOS

VoiceOver swipe up / down steps the value (increment / decrement actions).

Android

TalkBack volume keys or swipes step the value (increment / decrement actions).

Since v0.4.0Last updated Nov 2, 2026Edit this page on GitHub

PreviousMulti Select

NextOTP Input