<InputOTP.Root maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
<InputOTP.Group>
<InputOTP.Slot index={0} />
<InputOTP.Slot index={1} />
<InputOTP.Slot index={2} />
</InputOTP.Group>
<InputOTP.Separator />
<InputOTP.Group>…</InputOTP.Group>
</InputOTP.Root>Built on input-otp, so it is one real input behind the boxes — paste, autofill from an SMS, and select-all all work.
API
InputOTP.Root
| Prop | Type | Default | |
|---|---|---|---|
containerClassName | string | — | |
maxLength | number | required | |
children | ReactNode | — | |
noScriptCSSFallback | string | null | — | |
onChange | ((newValue: string) => unknown) | — | |
onComplete | ((...args: any[]) => unknown) | — | |
pasteTransformer | ((pasted: string) => string) | — | |
pushPasswordManagerStrategy | "increase-width" | "none" | — | |
render | InputOTPRenderFn | — | |
textAlign | "center" | "left" | "right" | — | |
value | string | — |
Plus the DOM props of the element it renders. Source: input-otp/components/input-otp-root.tsx.
InputOTP.Group
Plus every <div> prop. Source: input-otp/components/input-otp-group.tsx.
InputOTP.Separator
Plus every <div> prop. Source: input-otp/components/input-otp-separator.tsx.
InputOTP.Slot
| Prop | Type | Default | |
|---|---|---|---|
index | number | required |
Plus every <div> prop. Source: input-otp/components/input-otp-slot.tsx.