form · Normal DOM only

NumberInput

Numeric value with stepper buttons. Inline-edit friendly — Enter commits, Escape reverts.

Use for quantities, prices, durations, percentages. The component manages a draft state internally — typed value is only committed on blur, Enter, or stepper click, so partial input does not fire onChange every keystroke.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { NumberInput } from '@8maverik8/twenty-design';

Examples

Quantity and duration

Two NumberInputs as they appear in oapps-deal-items — quantity is integer, months is half-step.

Quantity

Months

tsx
<NumberInput value={qty} onChange={setQty} min={1} step={1} />
<NumberInput value={months} onChange={setMonths} min={0.5} step={0.5} />

Guidelines

✓

Set step to match the precision the user actually changes.step={0.5} for months, step={1} for quantity, step={10} for percentage discount tiers.

✓

Provide min / max when the field is bounded.Keyboard arrows respect them; users do not need to discover the bounds through error states.

Set precision smaller than your domain accepts.Currency wants precision: 2 (cents) — fractional cents are usually rejected by the server later.