@coreui/react-pro/dist/cjs/components/password-input/CPasswordInput.d.ts

UI Components Library for React.js

import React, { ChangeEventHandler, InputHTMLAttributes } from 'react';
import { CFormControlWrapperProps } from '../form/CFormControlWrapper';
export interface CPasswordInputProps extends CFormControlWrapperProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
    /**
     * Sets the accessible label (`aria-label`) for the toggle password visibility button. This improves accessibility for screen readers and should describe the action, e.g. `"Show password"` or `"Hide password"`.
     */
    ariaLabelToggler?: string;
    /**
     * A string of all className you want applied to the component.
     */
    className?: string;
    /**
     * Enables delayed `onChange` execution for improved performance in React password inputs.
     * - `true` delays the `onChange` callback by 500ms.
     * - You can also pass a custom delay (in milliseconds) as a number.
     */
    delay?: boolean | number;
    /**
     * Disables the password input field. When `true`, the user cannot interact with the field.
     */
    disabled?: boolean;
    /**
     * Callback triggered when the value of the password input changes. If `delay` is set, the callback is called after the specified timeout.
     */
    onChange?: ChangeEventHandler<HTMLInputElement>;
    /**
     * Makes the React password input read-only. Prevents user input but allows text selection.
     */
    readOnly?: boolean;
    /**
     * Controls the initial visibility of the password. When `true`, the input type is set to `"text"` instead of `"password"`. This allows **toggling password visibility** in React forms.
     */
    showPassword?: boolean;
    /**
     * Sets the visual size of the password input. Use `'sm'` for small or `'lg'` for large input fields.
     */
    size?: 'sm' | 'lg';
    /**
     * The value of the password input field. To make the input controlled, pair this with the `onChange` handler.
     */
    value?: string | string[] | number;
}
export declare const CPasswordInput: React.ForwardRefExoticComponent<CPasswordInputProps & React.RefAttributes<HTMLInputElement>>;