@navinc/base-react-components/dist/input.d.ts

Nav's Pattern Library

import { MouseEventHandler, MutableRefObject, ReactNode } from 'react';
import { Input as FormInput } from './form-elements/shared.js';
import { IconName } from './icons/index.js';
import { InferComponentProps } from './types.js';
type InputFieldProps = {
    label?: string;
    hasSpaceForErrors?: boolean;
    helperIcon?: IconName;
    helperLinkAction?: MouseEventHandler<HTMLDivElement>;
    helperText?: string;
    isStatic?: boolean;
    errors?: string[];
    lede?: ReactNode;
    touched?: boolean;
    childrenBeforeErrors?: ReactNode;
    innerRef?: MutableRefObject<HTMLInputElement | null>;
    tooltipText?: string;
    isPrivate?: boolean;
} & InferComponentProps<typeof FormInput>;
/**
 * All form-element components expect to be controlled components. This makes them
 * immediately compatible with form managers like formik or redux-form, as well as
 * within any stateful component.

 * Use the `<Input />` component just as you would for any `input` type that
 * accepts textual input (`radio`, `checkbox` have their own respective
 * components). To enable label dynamicism, be sure to pass `touched` as a property based on the Formik detection of the field having been visited. All props get passed on to the underlying `input`.

 * In addition to native form element attributes, all form-element components
 * implement these props.

 * Add a line of helper text below the input using `helperText` and `helperIcon`, and optionally convert the helper
 * into a button using the `helperAction` to perform some work, such as showing and hiding a password.

 * isInvalid: Boolean -- Indicates whether the value of the field is valid
 * (`false`) or invalid (`true`)

 * ```
 * <Input
 *   name="my-input"
 *   required
 *   isInvalid={this.state['my-input'].isInvalid}
 *   onChange={this.handleChange}
 *   value={this.state['my-input'].value}
 * />
 * ```

 * TODO: Add some standardized onClick tracking?
 *
 * @deprecated This component is deprecated and will be removed in a future release. Avoid using it in new code.
 */
export declare const Input: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<{
    label?: string;
    hasSpaceForErrors?: boolean;
    helperIcon?: IconName;
    helperLinkAction?: MouseEventHandler<HTMLDivElement>;
    helperText?: string;
    isStatic?: boolean;
    errors?: string[];
    lede?: ReactNode;
    touched?: boolean;
    childrenBeforeErrors?: ReactNode;
    innerRef?: MutableRefObject<HTMLInputElement | null>;
    tooltipText?: string;
    isPrivate?: boolean;
} & InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<(import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement>) | (Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<import("react").Component<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, any, any>>), {
    isInvalid?: boolean;
}>> & (string & (Omit<import("react").ComponentClass<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>, keyof import("react").Component<any, {}, any>>))>, never>> & string & Omit<({ autoFocus, children, className, label, hasSpaceForErrors, helperIcon, helperLinkAction, helperText, isInvalid, isStatic, value, required, type, errors, lede, touched, placeholder, childrenBeforeErrors, innerRef, tooltipText, isPrivate, ...props }: InputFieldProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
export {};