Shadcn Input Otp Verification Card

When to use

• Login and email verification codes, typed or pasted one character per slot
• Numeric PINs and digit only codes that ignore any letter typed into them
• Fixed length codes of letters and numbers, split into groups by separators

When not to use

• A bare code field with no Card, resend action or submit around it: use the Input Otp Basic example
• A complete sign-in page with password, social buttons and a brand layout: use the Auth blocks
• A mobile number with its country dial code, entered before any code is sent: use the Phone Input component
• Open ended text of any length, such as a name, an email address or a password: use the Input component

Agent notes

• The Verify Button sits in CardFooter outside the form, so it submits nothing; move it inside and handle the code in onSubmit
• The Resend Code Button has no handler, and on the radix twin it is the form submit button since it sets no type
• CardDescription prints the sample address m@example.com; show the address the code was really sent to
• A wrong code turns red only from aria-invalid on each InputOTPSlot; set on InputOTP it reaches the hidden input and the slots stay plain
• Read the code from onChange on InputOTP and check it once it reaches maxLength; no example sends or verifies it

Third-party API docs

• input-otp v1: API reference, docs, through shadcn Input Otp