A secure one-time password input component with auto-focus, validation, masking options, and Zod integration for authentication flows.
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"23import { OtpInput } from "@/registry/inputs/otp-input"45export function Component() {6 return (7 <OtpInput8 label="Verification Code"9 name="verificationCode"10 length={6}11 required12 separator13 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.
Autofill Support
OTP input with enhanced autofill support for SMS verification codes.
Short OTP
A 4-digit PIN input with grouping and separator for quick verification.
Numeric Only
Numeric-only OTP input with number pattern validation.