Delta Components

Docs

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

Based onStripe Checkout

Demo

Code

Open in

Verification Code

Enter the 6-digit verification code

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

Prop	Type	Default	Description
`label`	`string`	-	Label for the OTP input field (required)
`name`	`string`	-	Name of the input field for form submission (required)
`description`	`string`	`undefined`	Description text below the label
`hint`	`string`	`undefined`	Hint text below the OTP input
`error`	`string`	`undefined`	Error message to display
`required`	`boolean`	`false`	Whether the field is required
`pending`	`boolean`	`false`	Whether the field is in a loading state
`defaultValue`	`string`	`""`	Default value for the OTP input
`value`	`string`	`undefined`	Controlled value
`disabled`	`boolean`	`false`	Whether the OTP input is disabled
`length`	`number`	`6`	Length of the OTP code
`id`	`string`	`name`	ID for the OTP input element
`variant`	`"default" \| "pill"`	`"default"`	Visual variant of the input
`coloredBorder`	`boolean`	`false`	Whether to show colored border (pill variant)
`inputType`	`"numeric" \| "alphabetic" \| "alphanumeric"`	`"alphanumeric"`	Input type validation with error animation
`success`	`boolean`	`false`	Whether the OTP is in a success state (green border animation)
`labelVariant`	`"default" \| "muted"`	`"default"`	Label text styling variant
`containerClassName`	`string`	`""`	CSS classes for the container
`labelClassName`	`string`	`""`	CSS classes for the label
`maskChar`	`string`	`"•"`	Character to display when input is masked
`mask`	`boolean`	`false`	Whether to mask the input (like a password)
`autoFocus`	`boolean`	`false`	Whether to auto-focus the first input on mount
`separator`	`boolean`	`false`	Whether to render with separator between groups
`groupSize`	`number`	`3`	Size of each group of digits
`autoSubmit`	`boolean`	`false`	Whether to auto-submit form when OTP is completed
`schema`	`ZodType<string>`	`undefined`	Zod schema for validation
`onValidate`	`(isValid: boolean, value: string, error?: string) => void`	`undefined`	Validation callback
`onChange`	`(value: string) => void`	`undefined`	Callback when OTP value changes
`onComplete`	`(value: string) => void`	`undefined`	Callback when OTP is completed

Examples

Pill Variant

Rounded pill variant with muted background styling.

Demo

Code

Open in

Verification Code

Enter the 6-digit code

Autofill Support

OTP input with enhanced autofill support for SMS verification codes.

Demo

Code

Open in

Verification Code

Enter 6 digits to see auto-complete

Short OTP

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

Demo

Code

Open in

PIN Code

Enter your 4-digit PIN

Numeric Only

Numeric-only OTP input with number pattern validation.

Demo

Code

Open in

Numeric Verification Code

Enter only numbers (0-9)

Demo

Code

Open in

OTP Input Validation

Try entering wrong character types to see error animations. Complete valid codes to see success animations.

Numeric Only (6 digits)

Try entering letters to see error animation

Numeric OTP

Enter only numbers (0-9)

Alphabetic Only (4 letters)

Try entering numbers to see error animation

Alphabetic Code

Enter only letters (A-Z)

Alphanumeric (6 characters)

Try entering special characters to see error animation

Alphanumeric Code

Enter letters and numbers only

File Input

Radio Input

On This Page

Overview
Installation
Usage
API Reference
- Props
Examples

Contribute

Follow me on 𝕏@pprunty_

Delta Components

Getting Started

Blocks(1)

Components(9)

Media(5)

Landing Page(2)

Animations(4)

Layout(1)

Inputs(10)

Overview

Installation

Usage

API Reference

Props

Examples

Pill Variant

Autofill Support

Short OTP

Numeric Only

OTP Input Validation

Numeric Only (6 digits)

Alphabetic Only (4 letters)

Alphanumeric (6 characters)

OTP Input Validation

Numeric Only (6 digits)

Alphabetic Only (4 letters)

Alphanumeric (6 characters)