Components
Input OTP
Accessible one-time-password input with copy-paste support, mobile keyboard handling, and animated caret, built on input-otp.
Install
npx shadcn@latest add https://atomx.acau.net/r/input-otp.jsonUsage
InputOTP renders a fixed-length code input — typically 4–6 digits for SMS or authenticator codes. Set maxLength to the number of slots, then render one InputOTPSlot per index inside InputOTPGroup. Use InputOTPSeparator to visually break long codes into chunks. Paste handling and mobile numeric keyboards are built in.
<InputOTP maxLength={6} value={value} onChange={setValue}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>Preview
Six-digit code
Props
InputOTP extends React.ComponentProps<typeof OTPInput> from input-otp.
| Prop | Type | Notes |
|---|---|---|
maxLength | number | Total number of slots. Required. |
value | string | Controlled value. |
onChange | (value: string) => void | Fired on every character change. |
containerClassName | string | Class applied to the outer flex container. |
disabled | boolean | Disables all slots. |
pattern | string | Regex pattern restricting accepted characters (e.g. "^[0-9]+$"). |
InputOTPSlot extends <div>.
| Prop | Type | Notes |
|---|---|---|
index | number | Slot index within the OTP, starting at 0. Required. |