OTP input with multiple separators.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A controlled value prefilled with 123456, shown as 3 pairs between 2 separators
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 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
valuestarts as the sample 123456 inuseState; start it as an empty string so the slots load blank- A wrong code turns red only from aria-invalid on each
InputOTPSlot; set onInputOTPit reaches the hidden input and the slots stay plain - Read the code from
onChangeonInputOTPand check it once it reachesmaxLength; no example sends or verifies it
Third-party API docs
- input-otp v1: API reference, docs, through shadcn Input Otp
https://reui.io/components/input-otp/c-input-otp-3.mdget_example("c-input-otp-3")npx shadcn@latest add @reui/c-input-otp-3About Shadcn Input Otp Multiple Separators
OTP input with multiple separators. Built by composing Field, Input Otp. A free, open source shadcn input otp example you can install with npx shadcn@latest add @reui/c-input-otp-3 and edit as your own code.
What You Can Build With Shadcn Input Otp Multiple Separators
- Composes Field, Input Otp, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-input-otp-3
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Input Otp Examples
- Basic Basic OTP input.
- Digits Only OTP input with numeric digits.
- Letters & Numbers OTP input with letters and numbers.
- PIN Code OTP input for PIN codes.
- Verification Card OTP input verification code.
Related Shadcn Component Categories
Open-source shadcn item row components for list rows, settings items, and action rows.
Open-source shadcn kanban components for task boards, workflow pipelines, and drag-and-drop planning.
Open-source shadcn keyboard shortcut components for hotkey hints, command docs, and shortcut legends.
Open-source shadcn label components for form labels, accessible inputs, and field pairing.
Open-source shadcn marker components for agent run logs, inline status lines, and labeled separators.
Open-source shadcn menubar components for desktop navigation, editor menus, and app commands.
Frequently Asked Questions
When should I use Shadcn Input Otp Multiple Separators?
Use it for a controlled value prefilled with 123456, shown as 3 pairs between 2 separators.
Shadcn Input Otp as a whole fits:
- 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
For a complete sign-in page with password, social buttons and a brand layout, use the Auth blocks. For a mobile number with its country dial code, entered before any code is sent, use the Phone Input component. For open ended text of any length, such as a name, an email address or a password, use the Input component.
How do I install Shadcn Input Otp Multiple Separators?
Is Shadcn Input Otp Multiple Separators free to use?
Which components does Shadcn Input Otp Multiple Separators use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.