NumberInput

Status

Stable

Accessibility

Reviewed

Package

tenet-ui@0.5.0

Source

NumberInput.tsx

Import

import { NumberInput } from 'tenet-ui';

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

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	None	Controlled value. Use null/undefined for an empty field.
defaultValue	number | null	None	Uncontrolled initial value.
onChange	(value: number | null) => void	None	Called with the parsed numeric value (or null when the field is cleared).
min	number	None	Smallest allowed value. Stepping/clamping respects it.
max	number	None	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	None	Stretch the field to fill the available width.
blockdeprecated	boolean	None	Stretch the field to fill the available width. Deprecated since 0.5.0. Use fullWidth instead (renamed in 0.4.0). block keeps working until 0.6.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