OTPInput
A one-time password input with individual digit boxes, auto-advance, and paste support.
Live Demo
Invalid code. Please try again.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 6 | Number of digit boxes. |
value | string | — | Controlled value string. |
onChange | (value: string) => void | — | Callback receiving the full digit string. |
disabled | boolean | false | Disables all inputs. |
error | string | — | Error message shown below the inputs. |
autoFocus | boolean | false | Auto-focuses the first box on mount. |
Usage
import { OTPInput } from '@ghiberti85/ui'
// 6-digit default
<OTPInput onChange={(val) => console.log(val)} />
// 4-digit PIN
<OTPInput length={4} />
// With error
<OTPInput error="Invalid verification code" />
// Controlled
const [code, setCode] = useState('')
<OTPInput value={code} onChange={setCode} />