OTP input with numeric digits.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: One unbroken row of 6 slots that refuses anything but digits
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 short PIN of 4 digits with a hint line under its label: use the Input Otp PIN Code 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
REGEXP_ONLY_DIGITSdrops a pasted code whole when a space or dash sits inside it; strip them with the pasteTransformer prop- 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
https://reui.io/components/input-otp/c-input-otp-2.mdget_example("c-input-otp-2")npx shadcn@latest add @reui/c-input-otp-2About Shadcn Input Otp Digits Only
OTP input with numeric digits. Built by composing Field, Input Otp. Uses input-otp alongside the shadcn primitives. A free, open source shadcn input otp example you can install with npx shadcn@latest add @reui/c-input-otp-2 and edit as your own code.
What You Can Build With Shadcn Input Otp Digits Only
- 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-2
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Input Otp Examples
- Basic Basic OTP input.
- Multiple Separators OTP input with multiple separators.
- 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 Digits Only?
Use it for one unbroken row of 6 slots that refuses anything but digits.
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 short PIN of 4 digits with a hint line under its label, use the Input Otp PIN Code example. 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 Digits Only?
Is Shadcn Input Otp Digits Only free to use?
Which components does Shadcn Input Otp Digits Only 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.