Binhlaig UI Component
Input OTP
An accessible one-time password input for verification codes, login flows and security confirmations.
Installation
Add Input OTP to your project using the Binhlaig UI CLI.
Terminal
npx binhlaig-ui@latest add input-otpImport
Import the OTP components from your UI directory.
TypeScript
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@/components/ui/input-otp";Usage
Create a basic six-character verification input.
Numeric OTP
Restrict OTP input to numbers only.
With Separator
Split the OTP into groups using a separator.
Controlled OTP
Control the OTP value using React state.
Current value
EmptyVerification Card
Use Input OTP in an email or account verification flow.
Verify your email
Enter the 6-digit verification code sent to your email address.
Disabled State
Disable the OTP input when users should not edit the value.
Error State
Display a validation message when the OTP is incorrect.
The verification code is incorrect.
API Reference
Components and important properties available in Input OTP.
| Component | Important Props | Description |
|---|---|---|
InputOTP | maxLength, value, onChange, pattern, disabled | The root OTP input component. |
InputOTPGroup | className | Groups related OTP slots together. |
InputOTPSlot | index, className | Displays one character of the OTP value. |
InputOTPSeparator | className | Displays a visual separator between OTP groups. |