Forms & Inputs

Numeric Input

A row of individual digit boxes used for OTP, PIN, and numeric code entry. Each cell shows a dash placeholder when empty, a blinking violet cursor when focused, and the typed digit when filled.

V 1.0View in Storybook
Controls
Length
State
Disabled

Variants

States

Default (empty)

Partially filled

All filled

Error

6-digit OTP

Props

Name
Type
Default
length
number
4
value
string
''
onChange
(v: string) => void
—
state
'default' | 'typing' | 'typed' | 'error'
'default'
disabled
boolean
false

Code

import { OTPInput } from '@/src/components/OTPInput/OTPInput'

<OTPInput
  length={4}           // 4 | 6
  value={otp}
  onChange={setOtp}
  state="default"      // 'default' | 'typing' | 'typed' | 'error'
/>

Usage guidelines

When to use
  • Use for OTP (one-time password) verification flows.
  • Use for PIN entry where each digit is individually confirmed.
  • Use 4-digit length for PINs and short codes, 6-digit for OTP verification.
When not to use
  • Don't use for general numeric input like quantities or prices — use a standard Text input instead.
  • Don't pre-fill cells with placeholder digits — use the dash placeholder to signal empty state.
  • Don't disable individual cells — use the disabled prop to disable the entire input.