How to build an accessible OtpInput in React

Wraps the slots in role="group" with a localized aria-label and labels each slot with its position so screen readers announce which digit is being entered; the first slot carries autoComplete="one-time-code" so platform SMS autofill can populate the code.

When to use a OtpInput

• Entering a fixed-length one-time code (2FA, SMS verification, email confirmation) split across per-character slots
• Codes that benefit from auto-advance between slots and pasting the full code at once
• Numeric or alphanumeric short codes of a known length

When not to use it

• Variable-length or free-form text — use Input
• Secret credentials that should be masked — use PasswordInput
• Long codes where per-character boxes add no value over a single field — use Input

Keyboard interactions

Role group, verified at WCAG 2.2-AA.

• ArrowLeft
• ArrowRight
• Backspace

Common mistakes

Avoid: <Input maxLength={6} placeholder="Enter code" />

Prefer: <OtpInput length={6} value={code} onValueChange={setCode} />

OtpInput gives per-digit slots with auto-advance, backspace-to-previous, full-code paste handling, and autoComplete="one-time-code" that a single Input does not

Example

<OtpInput value="" onValueChange={() => {}} />

See the full OtpInput reference →