NumberInput

A number the reader nudges rather than types from scratch — reach for Input when the figure is just data like a port or an ID, and Slider when the position matters more than the exact value. It starts at zero rather than empty, so pass defaultValue wherever a pre-filled zero would be mistaken for an answer.

Usage

Examples

Sizes

The same height scale as Input, with the steppers shrinking to match rather than being dropped at the smaller sizes.

Disabled

Field and steppers both out. Worth checking here that the value still reads clearly, since a number nobody can change is often the number that matters.

With value

A set value. Typing is allowed as well as stepping, and the value is clamped against min and max rather than refused as it is typed.

With error

error reddens the border and sets the invalid state; the reason belongs in FieldError beneath it.

Props

Prop	Type	Default	Description
form	`string \| undefined`		The associate form of the input element.
title	`string \| undefined`
pattern	`string \| undefined`		The pattern used to check the <input> element's value against
defaultChecked	`boolean \| undefined`
defaultValue	`string \| undefined`	`0`	The initial value of the input when rendered. Use when you don't need to control the value of the input.
autoFocus	`boolean \| undefined`
id	`string`		The unique identifier of the machine.
tabIndex	`number \| undefined`
rel	`string \| undefined`
inputMode	`InputMode \| undefined`		Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices
onChange	`ChangeEventHandler<T, Element> \| undefined`
disabled	`boolean \| undefined`		Whether the number input is disabled.
name	`string \| undefined`		The name attribute of the number input. Useful for form submission.
value	`string \| undefined`		The controlled value of the input
asChild	`boolean \| undefined`		Use the provided child element as the default rendered element, combining their props and behavior.
ids	`ElementIds \| undefined`		The ids of the elements in the number input. Useful for composition.
readOnly	`boolean \| undefined`		Whether the number input is readonly
required	`boolean \| undefined`		Whether the number input is required
onValueChange	`complex`		Function invoked when the value changes
step	`number \| undefined`		The amount to increment or decrement the value by
max	`number \| undefined`		The maximum value of the number input
min	`number \| undefined`		The minimum value of the number input
translations	`IntlTranslations \| undefined`		Specifies the localized strings that identifies the accessibility elements and their states
largeStep	`number \| undefined`		The amount to increment or decrement the value by when the `Shift` key is held.
smallStep	`number \| undefined`		The amount to increment or decrement the value by when the `Alt` key is held.
allowMouseWheel	`boolean \| undefined`		Whether to allow mouse wheel to change the value
allowOverflow	`boolean \| undefined`		Whether to allow the value overflow the min/max range
clampValueOnBlur	`boolean \| undefined`		Whether to clamp the value when the input loses focus (blur)
focusInputOnChange	`boolean \| undefined`		Whether to focus input when the value changes
formatOptions	`Intl.NumberFormatOptions \| undefined`		The options to pass to the `Intl.NumberFormat` constructor
onValueInvalid	`complex`		Function invoked when the value overflows or underflows the min/max range
onFocusChange	`complex`		Function invoked when the number input is focused
onValueCommit	`complex`		Function invoked when the value is committed (when the input is blurred or the Enter key is pressed)
spinOnPress	`boolean \| undefined`		Whether to spin the value when the increment/decrement button is pressed
locale	`string \| undefined`		The current locale. Based on the BCP 47 definition.
size	`{ default: string; medium: string; small: string; 'inline-edit': string; }`	`default`
error	`boolean \| undefined`	`false`
data-testid	`string \| undefined`

#NumberInput

#Usage

#Examples

#Sizes

#Disabled

#With value

#With error