Authorization code component
Summary
AuthCodeInput is a 6-character authorization code input used for 2FA-style flows. It renders six single-character fields, and integrates with a backend to validate the entered code.
User story
As a user, I want to enter a 6-character authorization code and submit it, so that I can verify my identity in a familiar 2FA-style flow.
Anatomy
- 6 input fields aligned in a row (single character per field)
- In the middle of the input fields, render a dash (-)
Core behavior
Inputs
- Each of the 6 fields accepts a single character.
- Only digits 0–9 and letters A-Z are allowed.
- Typing a valid character:
o Stores the character in the current field.
o If the entered character is in lowercase, it must uppercase it automatically.
o Automatically focuses on the next field.
- OTP completeness:
o The component considers the value “complete” only when all 6 fields are filled.