Components / Forms

NumberInput

NumberInput is an Input pinned to type="number" with a numeric input mode. Reach for it whenever the field holds a number rather than free text.

Loading playground…

What it is

An Input with type="number" and inputMode="numeric" set. Everything else — the Field-context wiring, the invalid prop, the forwarded ref — comes straight from Input. The numeric input mode shows the number keypad on touch devices.

Install

NumberInput is exported from usemotif. No separate install.

example.tsx

import { NumberInput } from 'usemotif';

API

NumberInput

stable

const NumberInput: ForwardRefExoticComponent<NumberInputProps & RefAttributes<HTMLInputElement>>

…InputPropsOmit<InputProps, "type">

Every Input prop except `type`, which is fixed to `number`. `min`, `max`, `step`, `invalid`, and the rest pass through.

Accessibility

NumberInput inherits Input's contract — id, aria-describedby, invalid and required state from Field context. The numeric input mode is an enhancement for touch keyboards, not an accessibility guarantee: it does not constrain what can be entered. Pair min, max, and step with your own validation when the value range matters.

Examples

A quantity field inside a Field:

example.tsx

<Field>
<Label>Quantity</Label>
<NumberInput min={1} max={99} defaultValue={1} />
</Field>

A controlled numeric value:

example.tsx

<NumberInput
value={count}
onChange={(e) => setCount(Number(e.target.value))}
step={5}
/>