| ariaLabel | (index: number, total: number) => `Digit ${index + 1} of ${total}` | ((index: number, total: number) => string) |
Function to generate aria-label for each input field. Receives current index (0-based) and total number of inputs. |
| autoSubmit | - | boolean |
Automatically submit the form when all one time password fields are filled. |
| className | - | string |
A string of all className you want applied to the React.js OTP component. |
| defaultValue | - | string, number |
Initial value for uncontrolled React.js one time password input. |
| disabled | - | boolean |
Disable all one time password (OTP) input fields. |
| feedback4.2.0+ | - | ReactNode |
Provide valuable, actionable feedback. |
| feedbackInvalid4.2.0+ | - | ReactNode |
Provide valuable, actionable feedback. |
| feedbackValid4.2.0+ | - | ReactNode |
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid. |
| floatingClassName4.5.0+ | - | string |
A string of all className you want applied to the floating label wrapper. |
| floatingLabel4.2.0+ | - | ReactNode |
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid. |
| id | - | string |
ID attribute for the hidden input field. |
| invalid | - | boolean |
Set component validation state to invalid. |
| label4.2.0+ | - | ReactNode |
Add a caption for a component. |
| linear | true | boolean |
Enforce sequential input (users must fill fields in order). |
| masked | - | boolean |
Show input as password (masked characters). |
| name | - | string |
Name attribute for the hidden input field. |
| onChange | - | ((value: string) => void) |
Callback triggered when the React.js one time password (OTP) value changes. |
| onComplete | - | ((value: string) => void) |
Callback triggered when all React.js one time password (OTP) fields are filled. |
| placeholder | - | string |
Placeholder text for input fields. Single character applies to all fields, longer strings apply character-by-character. |
| readOnly | - | boolean |
Make React.js OTP input component read-only. |
| required | - | boolean |
Makes the input field required for form validation. |
| size | - | 'sm', 'lg' |
Sets the visual size of the React.js one time password (OTP) input. Use 'sm' for small or 'lg' for large input fields. |
| text4.2.0+ | - | ReactNode |
Add helper text to the component. |
| tooltipFeedback4.2.0+ | - | boolean |
Display validation feedback in a styled tooltip. |
| type | number | 'number', 'text' |
Input validation type: 'number' for digits only, or 'text' for free text. |
| valid | - | boolean |
Set component validation state to valid. |
| value | - | string, number |
Current value for controlled OTP input. |