Input OTP
Accessible one-time password input built on the input-otp library. A single invisible input rendered as individual character slots, with copy-paste support, pattern validation, and an animated caret on the active slot.
Installation
Install via CLI
npx @moontra/moonui-cli add input-otpUsage
Examples
Basic 6-Digit Code
A six character one-time password input. Type to fill the slots, or paste the full code — it is distributed across the slots automatically.
Digits Only Pattern
Restrict input with the pattern prop. The REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, and REGEXP_ONLY_DIGITS_AND_CHARS constants are re-exported for common cases.
Only digits are accepted; letters are ignored.
With Separator
Split the slots into multiple groups and place an InputOTPSeparator between them — a common layout for verification codes formatted as 123-456.
Controlled
Use value and onChange to control the input. This example shows live progress and a confirmation message once all six characters are entered.
Enter your one-time code (0/6)