API Reference

Complete API documentation for components, utilities, and framework core

Components

Form Components

Display Components

Navigation Components

Layout Components

Utility Components

Reference/API/OTPInput

OTPInput

One-time password input with auto-focus progression and paste support

🔧 Props

Property	Type	Default	Description
length	number	6	Number of OTP digits (4-8)
value*	van.state	-	Parent state (auto-updated as user types)
autofocus	boolean	false	Auto-focus first input on mount
onComplete	function	undefined	Callback when all digits entered
disabled	boolean	false	Disable all inputs
class	string	-	Input classes (overrides defaults)
containerClass	string	-	Container wrapper classes

✨ Features

Smart navigation: auto-advance on digit, backspace to previous

Full paste support with numeric filtering

Keyboard navigation (arrow keys)

Numeric-only input with mobile numeric keyboard

Dual-state pattern: individual inputs + parent state

💻 Examples

OTP Verification

javascript•OTP Verification

const otp = van.state('');
return OTPInput({
  value: otp,
  autofocus: true,
  onComplete: (code) => {
    console.log('OTP:', code);
    verifyOTP(code);
  }
});

▶️ Live Preview

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

💡 Usage Tips

🔗 Related

Explore vwf

Discover what vwf can do