Shadcn Input Otp PIN Code

OTP input for PIN codes. 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-5 and edit as your own code.

OTP input for PIN codes.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: A 4 slot PIN in one group, digits only, with a short hint above the slots

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 longer 6 digit one time code rather than a short PIN: use the Input Otp Digits Only 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

Each InputOTPSlot prints its char in plain view; mask a PIN with a custom slot that shows a dot in its place
input-otp sets autocomplete to one-time-code, so phones offer SMS codes here; pass autoComplete off to InputOTP for a PIN
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

Markdownhttps://reui.io/components/input-otp/c-input-otp-5.md

MCPget_example("c-input-otp-5")

Installnpx shadcn@latest add @reui/c-input-otp-5

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Input Otp PIN Code

Dependencies

input-otp

About Shadcn Input Otp PIN Code

What You Can Build With Shadcn Input Otp PIN Code

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-5
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.
Multiple Separators OTP input with multiple separators.
Letters & Numbers OTP input with letters and numbers.
Verification Card OTP input verification code.

Related Shadcn Component Categories

Item
Open-source shadcn item row components for list rows, settings items, and action rows.
Kanban
Open-source shadcn kanban components for task boards, workflow pipelines, and drag-and-drop planning.
Kbd
Open-source shadcn keyboard shortcut components for hotkey hints, command docs, and shortcut legends.
Label
Open-source shadcn label components for form labels, accessible inputs, and field pairing.
Marker
Open-source shadcn marker components for agent run logs, inline status lines, and labeled separators.
Menubar
Open-source shadcn menubar components for desktop navigation, editor menus, and app commands.

Frequently Asked Questions

When should I use Shadcn Input Otp PIN Code?

Use it for a 4 slot PIN in one group, digits only, with a short hint above the slots.

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 longer 6 digit one time code rather than a short PIN, use the Input Otp Digits Only 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 PIN Code?

Run npx shadcn@latest add @reui/c-input-otp-5. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Input Otp PIN Code free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Input Otp PIN Code use?

It composes Field, Input Otp. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.