Input OTP
One-time password input with slot groups and separator. Built on input-otp.
Install
Import path
Examples
Digits only
Pass a pattern (REGEXP_ONLY_DIGITS) to reject non-matching keystrokes.
Disabled
A non-interactive code input.
Alphanumeric
Use REGEXP_ONLY_DIGITS_AND_CHARS to accept both letters and numbers.
Controlled
Use the value and onChange props to control the input value.
Form
Accessible one-time password component with copy-paste functionality.
Four Digits
A common pattern for PIN codes. This uses the pattern={REGEXP_ONLY_DIGITS} prop.
Invalid
Use aria-invalid on the slots to show an error state.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Separator
Use the <InputOTPSeparator /> component to add a separator between input groups.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator,
} from "@codefast/ui/input-otp";
<InputOTP maxLength={6} value={v} onChange={setV}>
<InputOTPGroup>
<InputOTPSlot index={0} />
</InputOTPGroup>
</InputOTP>
API reference
Props for each part of the component. All native element props are also forwarded.
InputOTP
One-time-code input built on input-otp.
| Prop | Type | Default | Description |
|---|---|---|---|
| maxLength | number | — | Total number of slots (required). |
| value / onChange | string / (value: string) => void | — | Controlled value — the concatenated characters. |
| onComplete | (value: string) => void | — | Fires when every slot is filled. |
| pattern | string (RegExp source) | — | Restrict input, e.g. REGEXP_ONLY_DIGITS. |
InputOTPSlot / InputOTPSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
| index | number | — | On a slot: its position. Wrap groups with InputOTPGroup. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Arrow+Left | Moves to the previous slot. |
| Arrow+Right | Moves to the next slot. |
| Backspace | Clears the current slot and steps back. |
- Renders a single hidden input — paste fills every slot at once.
- Set autoComplete="one-time-code" so mobile keyboards offer the SMS code.
- Always pair with a visible instruction telling users where the code came from.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Match the slot count to the real code length.
- Group long codes (3 + 3) with a separator for readability.
Don’t
- Don’t use OTP slots for general text — use Input.
- Don’t block paste; many users paste the code from another app.