@codegouvfr/react-dsfr/Input.d.ts

French State Design System React integration library

import React, { ReactNode } from "react";
import type { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
import type { FrIconClassName, RiIconClassName } from "./fr/generatedFromCss/classNames";
export type InputProps = {
    className?: string;
    label: ReactNode;
    hintText?: ReactNode;
    /** default: false */
    disabled?: boolean;
    iconId?: FrIconClassName | RiIconClassName;
    classes?: Partial<Record<"root" | "label" | "description" | "nativeInputOrTextArea" | "message", string>>;
    /** Default: "default" */
    state?: "success" | "error" | "default";
    /** The message won't be displayed if state is "default" */
    stateRelatedMessage?: ReactNode;
} & (InputProps.WithoutTextArea | InputProps.WithTextArea);
export declare namespace InputProps {
    type WithoutTextArea = {
        /** Default: false */
        textArea?: false;
        /** Props forwarded to the underlying <input /> element */
        nativeInputProps?: InputHTMLAttributes<HTMLInputElement>;
        nativeTextAreaProps?: never;
    };
    type WithTextArea = {
        /** Default: false */
        textArea: true;
        /** Props forwarded to the underlying <textarea /> element */
        nativeTextAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
        nativeInputProps?: never;
    };
}
/**
 * @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-input>
 * */
export declare const Input: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLDivElement>>>;
export default Input;