Forms

Otp input

A one-time-code field: one box per character, one string of state.

Client componentSource

Import

import { OTPInput } from '@the_viveksingh/vivek-ui'

A verification code

Pasting the whole code fills every box at once, which is how people actually enter these. Backspace walks back, arrows move, and the value is one string rather than N pieces of state.

Paste the whole code and it fills every box at once.

<Field label="Verification code">
  <OTPInput length={6} onComplete={verify} />
</Field>

Masked and alphanumeric

<OTPInput length={4} mask type="numeric" size="lg" />
<OTPInput length={8} type="alphanumeric" size="sm" />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for OTPInput
PropTypeDefaultDescription
lengthnumber—Number of boxes. Default `6`.
valuestring—Controlled value. Longer strings are truncated, invalid characters dropped.
defaultValuestring—Uncontrolled initial value.
onChange(value: string) => void—Called with the whole code on every edit, in both modes.
onComplete(value: string) => void—Called once the last box is filled. Handy for auto-submit.
type'numeric' | 'alphanumeric'—`'numeric'` (default) accepts digits; `'alphanumeric'` also accepts letters.
maskboolean—Render the characters as dots.
size'sm' | 'md' | 'lg'——
disabledboolean——
readOnlyboolean——
invalidboolean—Sets `aria-invalid` on every box. Injected by `Field`.
requiredboolean—Injected by `Field`.
namestring—Submits the whole code with the form, via one hidden input.
autoFocusboolean—Focus the first box on mount.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering