A one-time-passcode field: length single-character boxes acting as one logical value, not
length independent inputs — typing a digit advances to the next box, Backspace on an empty box
deletes and refocuses the previous one, and pasting a full code splits it across every box at
once.
tsx
Verification code
<OTPInput label="Verification code" />label
length
Examples
onComplete fires once, exactly when the value reaches length characters — the natural hook for
auto-submitting a code without a separate "Verify" button:
tsx
Verification code
<OTPInput
label="Verification code"
length={6}
onComplete={(code) => verifyCode(code)}
/>A shorter PIN just needs a smaller length — the box count always follows it, nothing else to
configure:
tsx
PIN
<OTPInput label="PIN" length={4} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | text | — | — |
| defaultValue | text | — | — |
| description | text | — | — |
| disabled | boolean | — | — |
| error | text | — | — |
| label | text | — | — |
| length | number | 6 | — |
| onChange | readonly | — | — |
| onComplete | readonly | — | Called once the value reaches `length` characters. |
| success | text | — | — |
| value | text | — | — |