NumberInput

Numeric field with stepper buttons, min/max clamping, precision, and keyboard increments.

NumberInput is a controlled numeric field whose value is a number or null when empty. It clamps to min/max, rounds to precision decimals, and shows optional +/- stepper buttons. Arrow keys step by step, PageUp/PageDown step by ten, and Home/End jump to the bounds. Add a prefix or suffix to show a unit inside the field.

Example

Preview

import { NumberInput } from '@officina/ui';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState<number | null>(1);
  return <NumberInput value={value} onChange={setValue} min={0} max={10} step={1} suffix="qty" />;
}

API

Prop	Type	Default	Description
onChange*	(value: number \| null) => void	—	Called with the parsed value (null when cleared).
value*	number \| null	—	Current value, or null when empty.
ariaLabel	string	—	Accessible name when no visible label is present.
disabled	boolean	—
invalid	boolean	—	Marks the field invalid for validation styling and `aria-invalid`.
max	number	—	Maximum allowed value.
min	number	—	Minimum allowed value.
name	string	—	Form field name, for native form submission / form libraries.
placeholder	string	—
precision	number	—	Number of decimal places to enforce.
required	boolean	—
showSteppers	boolean	true	Show the stepper +/- buttons.
size	enum	md	Control size.
step	number	1	Increment/decrement step. Defaults to 1.
suffix	string	—	Unit suffix shown inside the field (e.g. "%").

Example

API

On this page