OTP Input
Verification code input: one digit per box.
Usage
import { OTPInput } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Email verification codes and staff PINs.
When not to use
- Passwords. Use Field.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | required | |
length | number | 6 | |
value, onChange, onComplete | string, (v) => void, (v) => void | - | |
isMasked | boolean | false | Use for PINs. |
isInvalid | boolean | false |
Accessibility
- Exposed as one input, not six.
- Pasting six digits fills every box.