@capgeminiuk/dcx-react-library/dist/formInput/FormInput.d.ts

[](https://circleci.com/gh/Capgemini/dcx-react-library)

import React from 'react';
import { HintProps } from '../common/components/commonTypes';
type FormInputProps = {
    /**
     * input name
     **/
    name: string;
    /**
     * input type
     **/
    type: string;
    /**
     * input value
     **/
    value?: any;
    /**
     * input label
     */
    label?: string;
    /**
     * pass the validation rules(please refer to forgJS) and the message you want to display
     **/
    validation?: {
        rule: any;
        message: string;
    } | any;
    /**
     * input class name
     */
    inputClassName?: string;
    /**
     * input container class name
     */
    containerClassName?: string;
    /**
     * allow to style the container in case of error
     */
    containerClassNameError?: string;
    /**
     * input label class name
     */
    labelClassName?: string;
    /**
     * allow to customise the error message with all the properites needed
     **/
    errorProps?: React.AllHTMLAttributes<HTMLDivElement>;
    /**
     * allow to customise the input with all the properites needed
     **/
    inputDivProps?: React.HTMLAttributes<HTMLDivElement>;
    /**
    /**
     * allow to customise the input with all the properites needed
     **/
    inputProps?: React.InputHTMLAttributes<HTMLInputElement> & {
        ref?: React.RefObject<HTMLInputElement>;
    };
    /**
     * allow to customise the label with all the properites needed
     */
    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
    /**
     * generic parameter to pass whatever element before the input
     **/
    prefix?: {
        content?: JSX.Element | string;
        properties: React.HTMLAttributes<HTMLDivElement>;
    };
    /**
     * generic parameter to pass whatever element after the input
     **/
    suffix?: {
        content?: JSX.Element | string;
        properties: React.HTMLAttributes<HTMLDivElement>;
    };
    /**
     * function that will trigger all the time there's a change in the input
     **/
    onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
    /**
     * function that will trigger when the input receives focus
     **/
    onFocus?: (event: React.FormEvent<HTMLInputElement>) => void;
    /**
     * function that will trigger when the input loses focus
     **/
    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * function that will check if is vald or not based on the validation rules
     **/
    isValid?: (valid: boolean, errorMessageVisible?: boolean) => void;
    /**
     * allow to specify an error message coming from another source
     */
    staticErrorMessage?: string;
    /**
     * error position - top or bottom
     **/
    errorPosition?: ErrorPosition;
    /**
     * define a string that labels the current element.
     **/
    ariaLabel?: string;
    /**
     * allows input to have aria-required
     */
    ariaRequired?: boolean;
    /**
     * you can trigger to display an error without interact with the component
     */
    displayError?: boolean;
    /**
     * allow to define an hint
     */
    hint?: HintProps;
    /**
     * Specifies if that field needs to be filled or not
     */
    required?: boolean;
    /**
     * tab index value
     */
    tabIndex?: number;
    /**
     * if a variant floating is specified it will add a class 'dcx-floating-label' for supporting a floating label feature
     */
    variant?: 'floating' | 'floating-filled' | 'normal';
    /**
     * visually hidden text for screen readers
     */
    hiddenErrorText: string;
    /**
     * visually hidden span attributes
     */
    hiddenErrorTextProps?: React.HTMLAttributes<HTMLSpanElement>;
};
export declare enum ErrorPosition {
    BEFORE_LABEL = "before-label",
    BOTTOM = "bottom",
    AFTER_LABEL = "after-label",
    AFTER_HINT = "after-hint"
}
export declare const FormInput: ({ name, type, value, label, validation, inputProps, labelProps, errorProps, prefix, suffix, onChange, onFocus, onBlur, isValid, staticErrorMessage, errorPosition, ariaLabel, ariaRequired, displayError, inputClassName, containerClassName, containerClassNameError, labelClassName, required, hint, variant, inputDivProps, tabIndex, hiddenErrorText, hiddenErrorTextProps, }: FormInputProps) => React.JSX.Element;
export {};