OTP Input
One-time-passcode entry rendered as N separate boxes — set otpLength on ZyraInput to switch it from a single field into this mode.
Completed code: —
API
All inputs and configuration options for zyra-input.
| Prop | Type | Default | Description |
|---|---|---|---|
otpLength | number | null | null | Number of boxes to render; switches ZyraInput into OTP mode when set |
otpType | 'numeric' | 'alphanumeric' | 'numeric' | Restricts which characters each box accepts |
size | 'sm' | 'md' | 'lg' | 'md' | Box dimensions and font scale |
complete (output) | string | - | Emits the full code once every box is filled |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Boxes are grouped with role="group"; each has an aria-label identifying its position
- Arrow Left/Right move between boxes; Backspace on an empty box clears and moves to the previous one
- First box carries autocomplete="one-time-code" so mobile browsers can offer SMS autofill