@carbon/react/es/components/TextInput/ControlledPasswordInput.d.ts

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2023, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, { type HTMLAttributes } from 'react';
export interface ControlledPasswordInputProps extends HTMLAttributes<HTMLInputElement> {
    /**
     * Provide a custom className that is applied directly to the underlying
     * `<input>` node
     */
    className?: string;
    /**
     * Optionally provide the default value of the `<input>`
     */
    defaultValue?: string | number;
    /**
     * Specify whether the control is disabled
     */
    disabled?: boolean;
    /**
     * Provide text that is used alongside the control label for additional help
     */
    helperText?: React.ReactNode;
    /**
     * Specify whether or not the underlying label is visually hidden
     */
    hideLabel?: boolean;
    /**
     * "Hide password" tooltip text on password visibility toggle
     */
    hidePasswordLabel?: string;
    /**
     * Provide a unique identifier for the input field
     */
    id: string;
    /**
     * Specify whether the control is currently invalid
     */
    invalid?: boolean;
    /**
     * Provide the text that is displayed when the control is in an invalid state
     */
    invalidText?: React.ReactNode;
    /**
     * Provide the text that will be read by a screen reader when visiting this
     * control
     */
    labelText: React.ReactNode;
    /**
     * @deprecated The `light` prop for `ControlledPasswordInput` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
     */
    light?: boolean;
    /**
     * Optionally provide an `onChange` handler that is called whenever `<input>`
     * is updated
     */
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
    /**
     * Optionally provide an `onClick` handler that is called whenever the
     * `<input>` is clicked
     */
    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
    /**
     * Specify the placeholder attribute for the `<input>`
     */
    placeholder?: string;
    /**
     * "Show password" tooltip text on password visibility toggle
     */
    showPasswordLabel?: string;
    /**
     * Specify the size of the Text Input.
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * Specify the alignment of the tooltip to the icon-only button.
     * Can be one of?: start, center, or end.
     */
    tooltipAlignment?: 'start' | 'center' | 'end';
    /**
     * Specify the direction of the tooltip for icon-only buttons.
     * Can be either top, right, bottom, or left.
     */
    tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
    /**
     * Provide the current value of the `<input>`
     */
    value?: string | number;
    togglePasswordVisibility?(event: React.MouseEvent<HTMLButtonElement>): void;
    type?: string;
}
declare const ControlledPasswordInput: React.ForwardRefExoticComponent<ControlledPasswordInputProps & React.RefAttributes<unknown>>;
export default ControlledPasswordInput;