ObjectUIComponentsForm
Input OTP
One-time password input with auto-focus
The Input OTP component provides a secure way to enter one-time passwords or verification codes.
Basic Usage
6-Digit OTP
{
"type": "input-otp",
"length": 6
}With Separator
With Visual Separator
{
"type": "input-otp",
"length": 6,
"separator": true
}Different Lengths
4-Digit
{
"type": "input-otp",
"length": 4
}8-Digit
{
"type": "input-otp",
"length": 8
}Schema
interface InputOTPSchema {
type: 'input-otp';
length: number; // Number of digits
value?: string; // Current value
separator?: boolean; // Show visual separator
// Events
onChange?: string | ActionConfig;
onComplete?: string | ActionConfig;
// States
disabled?: boolean;
// Styling
className?: string;
}Examples
In a Form
Verification Form
{
"type": "flex",
"direction": "column",
"gap": 4,
"children": [
{
"type": "label",
"text": "Enter verification code"
},
{
"type": "input-otp",
"length": 6,
"separator": true
},
{
"type": "text",
"value": "We sent a code to your email",
"className": "text-sm text-muted-foreground"
}
]
}