OTP Field

A group of single-character text inputs to handle one-time password verification

Source Code Radix UI

One Time Password

Installation


pnpm dlx radianui@latest add otp-field

Usage

Imports

/components/ui/otp-field.tsx

import { OTPField, OTPHiddenInput, OTPInput } from "@/components/ui/otp-field"

Code

/components/ui/otp-field.tsx

<OTPField>
	<OTPInput />
	<OTPInput />
	<OTPInput />
	{/* HiddenInput is required for the form to have data associated with the field */}
	<OTPHiddenInput />
</OTPField>

Examples

Size

Size - 28

Size - 32

Size - 36

Size - 40

Size - 44

Size - 48

Type - Password

One Time Password

Validation Type

Validation Type - Alphanumeric

Validation Type - Numeric

Validation Type - Alpha

Disabled

One Time Password

Form

Auto Submit Form

Props

Name	Default	Values
size	40	283236404456
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values
External Reference	-	-