Note: This project is still in development and has not been publicly released. Coming soon.
Docs
OTP Input
OTP Input

A secure one-time password input component with auto-focus, validation, masking options, and Zod integration for authentication flows.

21 views
3 downloads
Loading...

Overview

The OTP Input component provides a secure and user-friendly way to capture one-time passwords and verification codes, essential for authentication flows and security verification. It features auto-focus navigation, paste handling, optional masking, and customizable grouping with separators. Perfect for creating modern authentication experiences with seamless keyboard navigation and accessibility support.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/otp-input.json

Usage

1"use client"
2
3import { OtpInput } from "@/registry/inputs/otp-input"
4
5export function Component() {
6 return (
7 <OtpInput
8 label="Verification Code"
9 name="verificationCode"
10 length={6}
11 required
12 separator
13 groupSize={3}
14 hint="Enter the 6-digit verification code"
15 onComplete={(value) => console.log("OTP completed:", value)}
16 />
17 )
18}

API Reference

Props

PropTypeDefaultDescription
labelstring-Label for the OTP input field (required)
namestring-Name of the input field for form submission (required)
descriptionstringundefinedDescription text below the label
hintstringundefinedHint text below the OTP input
errorstringundefinedError message to display
requiredbooleanfalseWhether the field is required
pendingbooleanfalseWhether the field is in a loading state
defaultValuestring""Default value for the OTP input
valuestringundefinedControlled value
disabledbooleanfalseWhether the OTP input is disabled
lengthnumber6Length of the OTP code
idstringnameID for the OTP input element
variant"default" | "pill""default"Visual variant of the input
coloredBorderbooleanfalseWhether to show colored border (pill variant)
inputType"numeric" | "alphabetic" | "alphanumeric""alphanumeric"Input type validation with error animation
successbooleanfalseWhether the OTP is in a success state (green border animation)
labelVariant"default" | "muted""default"Label text styling variant
containerClassNamestring""CSS classes for the container
labelClassNamestring""CSS classes for the label
maskCharstring"•"Character to display when input is masked
maskbooleanfalseWhether to mask the input (like a password)
autoFocusbooleanfalseWhether to auto-focus the first input on mount
separatorbooleanfalseWhether to render with separator between groups
groupSizenumber3Size of each group of digits
autoSubmitbooleanfalseWhether to auto-submit form when OTP is completed
schemaZodType<string>undefinedZod schema for validation
onValidate(isValid: boolean, value: string, error?: string) => voidundefinedValidation callback
onChange(value: string) => voidundefinedCallback when OTP value changes
onComplete(value: string) => voidundefinedCallback when OTP is completed

Examples

Pill Variant

Rounded pill variant with muted background styling.

Loading...

Autofill Support

OTP input with enhanced autofill support for SMS verification codes.

Loading...

Short OTP

A 4-digit PIN input with grouping and separator for quick verification.

Loading...

Numeric Only

Numeric-only OTP input with number pattern validation.

Loading...
Loading...