Loading...
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 6 | Number of input fields |
onChange | (value: string) => void | - | Callback when value changes |
placeholder | string | "" | Placeholder character for empty fields |
autoFocus | boolean | true | Whether to focus the first field on mount |
Examples
Custom Length and Placeholder
<OTPInput
length={4}
placeholder="•"
onChange={(val) => console.log("OTP:", val)}
/>With Change Handler
const [otp, setOtp] = useState("");
<OTPInput
length={6}
onChange={(val) => setOtp(val)}
placeholder="•"
/>
<p>Current OTP: {otp}</p>