OTP Input

A fully accessible, developer-friendly multi-box input designed for One-Time Passwords and 2FA codes.

Building a multi-box input that actually feels good to use is notoriously difficult. This OtpInputBlock handles it all automatically: seamless copy/pasting, ArrowLeft and ArrowRight navigation, intuitive Backspace handling that smoothly shifts focus backward, and built-in hooks for both onChange and onComplete.

Explore the different variations of the OTP Input — each example shows a live preview with the exact code to copy. Try copying a 6-digit number and pasting it directly into the first box.

OTP Input

Paste, arrow-key and backspace handling are built in.

value: and onChange work with the assembled string, not an array — the internal per-box state syncs to it.
onComplete: fires once every box is filled, which saves you comparing lengths yourself.

Focus Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install OTP Input

npx shadcn@latest add @algorize-ui/otp-input

components/custom/blocks/OtpInputBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — OTP Input needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Underlined

Usevariant"underlined": to reduce each box to a baseline rule.

Features

Learn about the OTP Input's seamless user experience, featuring automatic focus advancing, paste support, and backspace handling.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Component	Prop	Type	Default	Description
`OtpInputBlock`	`length`	`number`	`6`	The number of individual input boxes to generate for the OTP code.
`OtpInputBlock`	`value`	`string`	`""`	The controlled string value. The internal array state automatically syncs with this value.
`OtpInputBlock`	`onChange`	`(value: string) => void`	`undefined`	Fires every time a single digit is added, changed, or removed, returning the newly assembled string.
`OtpInputBlock`	`onComplete`	`(value: string) => void`	`undefined`	A convenience callback that fires automatically as soon as all input boxes have been filled.
`OtpInputBlock`	`variant`	`"default" \| "filled" \| "underlined"`	`"default"`	Determines the structural styling and border treatment of the individual input boxes.
`OtpInputBlock`	`color`	`"indigo" \| "rose" \| "emerald" \| "zinc" \| string`	`"primary"`	The theme color applied to the borders, text, and focus rings. Fully supports custom hex codes.
`OtpInputBlock`	`mask`	`boolean`	`false`	If true, converts the underlying HTML inputs to `type="password"` to obscure the characters.
`OtpInputBlock`	`disabled`	`boolean`	`false`	If true, disables all interactions across all input boxes and reduces their overall opacity.