Shadcn Input Otp Basic

Basic OTP input. 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-1 and edit as your own code.

Basic OTP input.

For AI Agents

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

Best for: The minimal markup: 6 slots split 3 and 3 by one separator, accepting any character

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 numeric code whose slots should refuse letters as they are typed: use the Input Otp Digits Only example
A full verification step with a resend action and a submit button: use the Input Otp Verification Card 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

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

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

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

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

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Input Otp Basic

About Shadcn Input Otp Basic

Basic OTP input. 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-1 and edit as your own code.

What You Can Build With Shadcn Input Otp Basic

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-1
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Input Otp Examples

Digits Only OTP input with numeric digits.
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

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 Basic?

Use it for the minimal markup: 6 slots split 3 and 3 by one separator, accepting any character.

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 numeric code whose slots should refuse letters as they are typed, use the Input Otp Digits Only example. For a full verification step with a resend action and a submit button, use the Input Otp Verification Card 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 Basic?

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

Is Shadcn Input Otp Basic free to use?

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

Which components does Shadcn Input Otp Basic 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.