@coreui/react-pro
Version:
UI Components Library for React.js
74 lines (73 loc) • 2.43 kB
TypeScript
import React, { HTMLAttributes } from 'react';
import { CFormControlWrapperProps } from '../form/CFormControlWrapper';
export interface COneTimePasswordProps extends CFormControlWrapperProps, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
/**
* Function to generate aria-label for each input field. Receives current index (0-based) and total number of inputs.
*/
ariaLabel?: (index: number, total: number) => string;
/**
* Automatically submit the form when all one time password fields are filled.
*/
autoSubmit?: boolean;
/**
* A string of all className you want applied to the React.js OTP component.
*/
className?: string;
/**
* Initial value for uncontrolled React.js one time password input.
*/
defaultValue?: string | number;
/**
* Disable all one time password (OTP) input fields.
*/
disabled?: boolean;
/**
* ID attribute for the hidden input field.
*/
id?: string;
/**
* Enforce sequential input (users must fill fields in order).
*/
linear?: boolean;
/**
* Show input as password (masked characters).
*/
masked?: boolean;
/**
* Name attribute for the hidden input field.
*/
name?: string;
/**
* Callback triggered when the React.js one time password (OTP) value changes.
*/
onChange?: (value: string) => void;
/**
* Callback triggered when all React.js one time password (OTP) fields are filled.
*/
onComplete?: (value: string) => void;
/**
* Placeholder text for input fields. Single character applies to all fields, longer strings apply character-by-character.
*/
placeholder?: string;
/**
* Make React.js OTP input component read-only.
*/
readOnly?: boolean;
/**
* Makes the input field required for form validation.
*/
required?: boolean;
/**
* Sets the visual size of the React.js one time password (OTP) input. Use 'sm' for small or 'lg' for large input fields.
*/
size?: 'sm' | 'lg';
/**
* Input validation type: 'number' for digits only, or 'text' for free text.
*/
type?: 'number' | 'text';
/**
* Current value for controlled OTP input.
*/
value?: string | number;
}
export declare const COneTimePassword: React.ForwardRefExoticComponent<COneTimePasswordProps & React.RefAttributes<HTMLDivElement>>;