Skip to content
Twentyfirst UIHalo

Number Input

Forms · NumberInput, OtpInput, Slider

Number entry three ways: NumberInput with − / + steppers, Slider for a value on a known scale, OtpInput for one-time codes.

NumberInput: label, value/defaultValue, onChange(n), min, max, step, unit, hint.
Slider: label, min, max, step, value/defaultValue, onChange(n), format(v), marks (false hides min/max), hint.
OtpInput: length (6), onComplete(code), error (shakes and turns red), label.

  • NumberInput for small exact counts (seats, days); arrow keys step too.
  • Slider when the range matters more than the exact value (budgets, thresholds); always show the value bubble.
  • OtpInput moves focus forward as you type, back on Backspace, and fills every box on paste.
€24 per seat
%
Verification code
Paste works too
€120
€0€500
Agents pause and ask you once they reach it

Props

NumberInput

PropTypeNotes
label?string
value?number
defaultValue?number
onChange?(n: number) => void
min?number
max?number
step?number
unit?string
hint?string
error?string
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

OtpInput

PropTypeNotes
length?number
onComplete?(code: string) => void
error?boolean
label?string
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Slider

PropTypeNotes
label?string
min?number
max?number
step?number
value?number
defaultValue?number
onChange?(n: number) => void
format?(n: number) => string
marks?boolean
hint?string
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.