FormBrowse form components
OTP / PIN
Slot-based code entry for 2FA and PINs. Per-slot focus + filled state.
Live preview
—
Usage
Adapters:React stableVue stable
index.html
<div class="lm-otp">
<input class="lm-otp-slot" maxlength="1" aria-label="Digit 1 of 6" />
<!-- … -->
</div>CSS classes (3)
| Class | Description |
|---|---|
lm-otp | Inline-flex slot wrapper |
lm-otp-slot | Single character input |
lm-otp-separator | Visual divider between groups |
React props (2)
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 6 | — |
groups | number[] | — | e.g. [3, 3] renders two groups separated |
Accessibility
- Each slot needs aria-label='Digit n of m'.
- Forward focus on input, backward on Backspace from empty slot.
Spotted something wrong? Edit this entry on GitHub.