NumberInput – Once UI

NumberInput is an Input for a number. The − and + buttons step the value by step and stop at min and max. Typing works too, and onChange gets a number whenever the text reads as one. The keyboard is a number pad, with a minus key when min allows negative numbers. See the web NumberInput for the browser version.

Basic usage

Without value the field keeps its own text, starting from defaultValue.

Guests.tsx

import { NumberInput } from "@once-ui-system/native";

export function Guests() {
return <NumberInput label="Guests" defaultValue={2} min={1} max={8} />;
}

Controlled

Pass value and update it in onChange. A new value from outside replaces the text, unless the text already reads as that number, so typing 1. is not undone.

Quantity.tsx

import { useState } from "react";
import { NumberInput } from "@once-ui-system/native";

export function Quantity() {
const [quantity, setQuantity] = useState(1);
return (
  <NumberInput
    label="Quantity"
    value={quantity}
    onChange={setQuantity}
    min={0}
    description="Up to 12 per order."
    max={12}
  />
);
}

Decimals and padding

A fractional step rounds each step to its decimals, so 0.1 + 0.2 shows as 0.3. padStart pads the number with leading zeros.

Decimals

import { NumberInput } from "@once-ui-system/native";

export function Settings() {
return (
  <>
    <NumberInput label="Ratio" defaultValue={1.5} step={0.1} min={0} />
    <NumberInput label="Minute" defaultValue={5} padStart={2} min={0} max={59} />
  </>
);
}

Differences from the web

The steppers are a − and a + button after the value, sized for a finger, instead of two small chevrons stacked on the right edge.
A stepper is disabled when its next step would pass min or max. On the web it stays enabled and does nothing.
Steps are rounded to the decimals of step, so fractional steps do not show floating-point noise.
keyboardType defaults to a number pad: decimal-pad when min is 0 or more, otherwise a keyboard with a minus key. Pass keyboardType to change it.
suffix is taken by the steppers, as on the web. The other Input props work as on Input.

API reference

Prop	Type	Default	Description
value	number		The number, when the host owns the state. Pair with onChange.
defaultValue	number \| string		The starting number when there is no value. A string is parsed.
onChange	(value: number) => void		Called with the number, whenever the text reads as one.
min	number		The lowest value the − button reaches.
max	number		The highest value the + button reaches.
step	number	1	How far each button press moves the value.
padStart	number		Pads the shown number with leading zeros to this many digits.
...InputProps	InputProps		Every other Input prop except suffix: label, error, description, size and the rest.