NumberInput

Status: stableAccessibility reviewedtenet-ui@0.4.0

Import

import { NumberInput } from 'tenet-ui';

Also accepts every prop of Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue' | 'onChange'>.

Source: src/components/NumberInput/NumberInput.tsx

Usage guidelines

When to use: entering a bounded quantity — a count, a price, a limit, a percentage. For free-form text use TextInput; for picking from a fixed list use Select.

Rules

• Give it an accessible name via FormControl.Label or aria-label.
• It reports a parsed number | null through onChange — don’t re-parse a string. An empty field is null, not 0.
• Set min / max so the steppers and arrow keys clamp; set step to the natural increment (e.g. 5, 0.1).
• Control it with value + onChange, or leave uncontrolled with defaultValue.
• Use size / fullWidth from the scale (block is the deprecated 0.3.0 name and warns); use invalid for validation state.
• Never use a raw <input type="number"> styled by hand — you lose the token chrome, the clamping, and the number-typed change handler.

Do / Don’t

• ✅ <NumberInput aria-label="Quantity" defaultValue={1} min={1} max={99} />
• ✅ controlled: <NumberInput value={qty} onChange={setQty} min={0} step={5} />
• ❌ <input type="number" className="myfield" /> — off-system, no number | null contract.
• ❌ Treating the empty state as 0 — it is null; decide intent explicitly.

See also: FormControl, TextInput; system guideline forms.

Examples

4 stories for NumberInput — open in Storybook

• Default components-numberinput--default
• With Range components-numberinput--with-range
• Empty components-numberinput--empty
• Disabled components-numberinput--disabled

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Prop	Type	Default	Description
value	number | null	—	Controlled value. Use null/undefined for an empty field.
defaultValue	number | null	—	Uncontrolled initial value.
onChange	(value: number | null) => void	—	Called with the parsed numeric value (or null when the field is cleared).
min	number	—	Smallest allowed value. Stepping/clamping respects it.
max	number	—	Largest allowed value. Stepping/clamping respects it.
step	number	1	Increment applied by the steppers and arrow keys.
size	'small' | 'medium' | 'large' NumberInputSize	medium	Control height / font scale.
fullWidth	boolean	—	Stretch the field to fill the available width.
blockdeprecated	boolean	—	Stretch the field to fill the available width. Deprecated since 0.4.0. Use fullWidth instead (renamed in 0.4.0). block keeps working until 0.5.0.
invalid	boolean	false	Mark the field as invalid (sets aria-invalid and a danger border).

Deprecated props keep working for one minor release; the replacement is named in the row.

Related components

• TextInput
• FormControl
• Select