React One Time Password Input Component API
One Time Password Input API
Explore the API reference for the React One Time Password Input components and discover how to effectively utilize their props for customization.
COneTimePassword#
import { COneTimePassword } from '@coreui/react'// orimport COneTimePassword from '@coreui/react/src/components/one-time-password-input/COneTimePassword'| Property | Default | Type |
|---|---|---|
| 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# | false | 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# | false | boolean |
Disable all one time password (OTP) input fields. | ||
| feedback#4.2.0+ | - | ReactNode |
Provide valuable, actionable feedback. | ||
| feedbackInvalid#4.2.0+ | - | ReactNode |
Provide valuable, actionable feedback. | ||
| feedbackValid#4.2.0+ | - | ReactNode |
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, | ||
| floatingClassName#4.5.0+ | - | string |
A string of all className you want applied to the floating label wrapper. | ||
| floatingLabel#4.2.0+ | - | ReactNode |
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, | ||
| id# | - | string |
ID attribute for the hidden input field. | ||
| invalid# | - | boolean |
Set component validation state to invalid. | ||
| label#4.2.0+ | - | ReactNode |
Add a caption for a component. | ||
| linear# | true | boolean |
Enforce sequential input (users must fill fields in order). | ||
| masked# | false | 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# | false | boolean |
Make React.js OTP input component read-only. | ||
| required# | false | 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. | ||
| text#4.2.0+ | - | ReactNode |
Add helper text to the component. | ||
| tooltipFeedback#4.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. | ||
COneTimePasswordInput#
import { COneTimePasswordInput } from '@coreui/react'// orimport COneTimePasswordInput from '@coreui/react/src/components/one-time-password-input/COneTimePasswordInput'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the component. | ||