InputOTP

atoms

Multi-digit OTP input. Auto-advance between digits, paste support.

ARIA Role: group

Demo

Please enter a valid value

Props

PropTypeRequiredDefaultDescription
lengthnumberNo6Number of digits
valuestringNo—Current OTP value
onChange(value: string) => voidYes—Value change handler
disabledbooleanNofalseDisabled state
errorstringNo—Validation error

TypeScript Interface

interface InputOTPProps {
  length?: number;
  value?: string;
  onChange: (value: string) => void;
  disabled?: boolean;
  error?: string;
}

Assertions (NASA Rule 5)

  • [type]length prop must equal number of input cells(NASA Rule 5)
  • [aria]Each input must have aria-label or be in labelled group(WCAG 1.3.1)
  • [aria]Provide aria-live='polite' for value announcements(WCAG 4.1.3)
  • [keyboard]Arrow keys, Backspace, and paste must be supported(WCAG 2.1.1)

Usage

Import

import { Inputotp } from '@epasslive/design-system'

Basic

<Inputotp />

With Variants

<Inputotp variant="primary" size="md" />