Input OTP
@/components/kamod-ui/input-otp
Installation
Import InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator and optional REGEXP_ONLY_DIGITS from `@/components/kamod-ui/input-otp`.
pnpm add @kamod-ch/uiUsage
Render one InputOTPSlot per index (0 … maxLength−1). Typing updates all slots from a single transparent input. Use pattern with REGEXP_ONLY_DIGITS or REGEXP_ONLY_DIGITS_AND_CHARS. onChange and onValueChange both receive the string.
import { InputOtp } from "@/components/kamod-ui/input-otp";<InputOtp />Demo
Six slots with defaultValue (shadcn InputOTPDemo).
Usage
Group + separator pattern for 3+3 codes.
Pattern
Digits-only or alphanumeric filtering via exported RegExp constants.
Separator
Multiple groups and separators (2+2+2).
Disabled
disabled + value shows a filled, non-editable code.
Controlled
value + onChange (or onValueChange) with live hint text.
Enter your one-time password.
Invalid
Pass aria-invalid on slots for error styling (manual / server validation).
Four digits
PIN length 4 with digits pattern.
Alphanumeric
REGEXP_ONLY_DIGITS_AND_CHARS for mixed codes.
Form
Verification card layout (shadcn InputOTPForm) with larger slots via group class.
API Reference
Props, slots and variants for this component.
Input OTP
Input OTP component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| maxLength | number | 6 |
| value / defaultValue | string | — |
| onChange / onValueChange | (v: string) => void | — |
| pattern | RegExp | — |
| InputOTPSlot index | number | required |
| REGEXP_ONLY_DIGITS / REGEXP_ONLY_DIGITS_AND_CHARS | RegExp | exported |
Accessibility Notes
A single focusable input covers the slots; use a visible Label and htmlFor when possible. autoComplete defaults to one-time-code. Do not auto-submit before the user confirms the code.