Shadcn Input Otp Letters & Numbers

OTP input with letters and numbers. 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-4 and edit as your own code.

OTP input with letters and numbers.

For AI Agents

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

Best for: A 6 character code that takes letters and digits but refuses symbols, with a hint between label and 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 code made only of digits, shown in a single unbroken row: 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

input-otp defaults inputMode to numeric, so phones open a number pad; set inputMode to text on InputOTP so letters can be typed
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-4.md

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

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

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Input Otp Letters & Numbers

Dependencies

input-otp

About Shadcn Input Otp Letters & Numbers

What You Can Build With Shadcn Input Otp Letters & Numbers

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-4
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.
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 Letters & Numbers?

Use it for a 6 character code that takes letters and digits but refuses symbols, with a hint between label and 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 code made only of digits, shown in a single unbroken row, 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 Letters & Numbers?

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

Is Shadcn Input Otp Letters & Numbers free to use?

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

Which components does Shadcn Input Otp Letters & Numbers 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.