@react-md/form/lib/text-field/Password.d.ts

This package is for creating all the different form input types.

import type { CSSProperties, MouseEventHandler, ReactNode } from "react";
import type { TextFieldProps } from "./TextField";
export interface ConfigurableVisibilityIcon {
    /**
     * The icon to display while the password is currently visible as plain text.
     */
    visible: ReactNode;
    /**
     * The icon to display while the password is currently invisible as the
     * password input.
     */
    invisible: ReactNode;
}
export declare type GetVisibilityIcon = (type: "text" | "password") => ReactNode;
export interface PasswordProps extends Omit<TextFieldProps, "type"> {
    /**
     * The icon to use to toggle the visibility of the password by changing the
     * input type to text temporarily. This can either be a renderable React node
     * or an object for the `visible` and `invisible` states.
     */
    visibilityIcon?: ReactNode | ConfigurableVisibilityIcon;
    /**
     * An optional style to apply to the visibility toggle button.
     */
    visibilityStyle?: CSSProperties;
    /**
     * An optional classname to apply to the visibility toggle button.
     */
    visibilityClassName?: string;
    /**
     * An optional `aria-label` to apply to the visibility toggle button.
     *
     * Note: The visibility button is being treated as a [toggle
     * button](https://www.w3.org/TR/wai-aria-practices-1.1/#button) which means
     * that the label **should not change** based on the visibility state and
     * should not include the word "toggle" since it will be redundant.
     */
    visibilityLabel?: string;
    /**
     * Boolean if the visibility toggle feature should be disabled.
     */
    disableVisibility?: boolean;
    /**
     * An optional function to return the current icon to display within the
     * visibility toggle button for additional control.
     *
     * Depending on the customization needs, it will probably be easier to just
     * implement your own `Password` component using the native `TextField`.
     */
    getVisibilityIcon?: GetVisibilityIcon;
    /**
     * An optional function to call when the visibility button has been clicked.
     * This is only a simple `MouseEventHandler` for the button element.
     *
     * Depending on the customization needs, it will probably be easier to just
     * implement your own `Password` component using the native `TextField`.
     */
    onVisibilityClick?: MouseEventHandler<HTMLButtonElement>;
}
/**
 * This component is a simple wrapper of the `TextField` that can only be
 * rendered for password inputs. There is built-in functionality to be able to
 * temporarily show the password's value by swapping the `type` to `"text"`.
 */
export declare const Password: import("react").ForwardRefExoticComponent<PasswordProps & import("react").RefAttributes<HTMLInputElement>>;