InputOTP
ImplementedMulti-digit OTP input. Auto-advance between digits, paste support.
patterns/atoms/inputotp.htmlSegmented one-time-password input. Supports numeric or alphanumeric codes, three sizes, and an onComplete hook for auto-submit. FR-CA: Code à usage unique segmenté.
InputOTP
Interactive atom (Family 1 — Tier 1)
Use for 2FA verification, email confirmation codes, and passwordless login flows.
Numeric — 6 segments
Alphanumeric — 8 segments
Small
This component supports light and dark mode.
Interactive demo
Valeur courante : (vide)
Usage
import { InputOTP } from '@epasslive/design-system'
<InputOTP length={6} value={code} onChange={setCode} onComplete={submitVerification} label="Code de vérification" />Accessibility
- Each segment is announced as "1 of 6" etc.
- A
role="status"live region announces "3 of 6 digits entered" as the code is typed, and "Code complete" when all segments are filled. - Auto-paste from SMS / email is supported on WebKit + Chromium.
Props
lengthnumber6Number of segments (typically 4 or 6).
valuestringControlled value (digits concatenated).
onChange*(value: string) => voidPer-segment change handler.
onComplete(value: string) => voidFires once when all segments are filled.
disabledbooleanfalseDisables all segments.
autoFocusbooleanfalseFocuses the first segment on mount.
type'numeric' | 'alphanumeric'numericNumeric for codes; alphanumeric for recovery codes.
size'sm' | 'md' | 'lg'mdSegment size.
labelstringVisible + announced label.
errorstringValidation message.
Props
InputOTP
lengthnumber6Number of digits
valuestring—Current OTP value
onChange(value: string) => void—Value change handler
disabledbooleanfalseDisabled state
errorstring—Validation error
onComplete(value: string) => void—Synced from source — no interface JSDoc yet; document on `InputOTP.tsx`.
autoFocusbooleanfalseFocuses the element on mount.
type'numeric' | 'alphanumeric''numeric'Underlying element/input type.
size'sm' | 'md' | 'lg''md'Visual size preset.
labelstring—Visible label for the control.
<InputOTP />Accessibility
Type
1 ruleARIA
2 rulesKeyboard
1 ruleUsage
Import
import { InputOTP } from "@epasslive/design-system"Example 1
<Input label="Email" type="email" />Example 2
<Input label="Password" type="password" required />Anti-patterns
— Do not compose atoms directly — use molecules instead
— Avoid inline styles on atoms