Open experiment
Constellation OTP input
Six purpose-built digit inputs form a verification constellation. Typing advances, Backspace retreats, full-code paste distributes safely, and completion connects the cells while a polite status confirms readiness.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<fieldset class="cmp-constellation-otp">
<legend>Enter verification code</legend>
<p>Six digits sent to your secure device</p>
<div class="cmp-constellation-otp__cells">
<input
aria-label="Digit 1 of 6"
inputmode="numeric"
maxlength="1"
autocomplete="one-time-code"
/>
<input aria-label="Digit 2 of 6" inputmode="numeric" maxlength="1" />
<input aria-label="Digit 3 of 6" inputmode="numeric" maxlength="1" />
<input aria-label="Digit 4 of 6" inputmode="numeric" maxlength="1" />
<input aria-label="Digit 5 of 6" inputmode="numeric" maxlength="1" />
<input aria-label="Digit 6 of 6" inputmode="numeric" maxlength="1" />
</div>
<span class="cmp-constellation-otp__status" aria-live="polite">Waiting for six digits</span>
</fieldset>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The inputs are grouped in a descriptive fieldset.
- Every cell has an explicit digit-position label.
- Typing, correction, and full-code paste are keyboard friendly.
License: MIT License for open-source use, modification, and distribution.