Input OTP Component
Clean flat OTP input fields with focus ring states following Capsule7 design.
Basic Usage
Enter a 6-digit verification code.
Entered: Nothing yet
With Separator
Split groups with a separator for better readability.
Masked PIN (Password Style)
PIN input with dots for privacy, like password fields.
Entered: Nothing yet (0/4)
4-Digit PIN
Short verification codes for quick authentication.
Two-Factor Authentication
Enter verification code
Enter the 6-digit code from your authenticator app.
SMS Verification with Error Handling
Check your phone
We sent a verification code to +1 (***) ***-1234
Enter 123456 for success
Secure PIN Entry with Attempts
Enter your PIN
Enter your 4-digit security PIN to continue
3 attempts left
Correct PIN is 1234
Email Verification
Verify your email
We've sent a code to j***@example.com
Didn't receive the code?
States
1
2
3
4
Invalid code. Please try again.
1
2
3
4
Code verified successfully!
Click on the input to see the active slot with accent ring effect.