design-react-kit/dist/types/Input/Input.d.ts

Componenti React per Bootstrap 5

import React, { ElementType, InputHTMLAttributes, ReactNode, Ref } from 'react';
import type { CSSModule } from 'reactstrap/types/lib/utils';
type InputType = 'text' | 'email' | 'select' | 'file' | 'radio' | 'checkbox' | 'textarea' | 'button' | 'reset' | 'submit' | 'date' | 'datetime-local' | 'hidden' | 'image' | 'month' | 'number' | 'range' | 'search' | 'tel' | 'url' | 'week' | 'password' | 'datetime' | 'time' | 'color' | 'adaptive' | 'currency' | 'percentage';
export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
    /** Il tipo specifico di input da utilizzare. Il valore di default è `text`. */
    type?: InputType;
    /** Dimensione personalizzate del campo di Input secondo le classi Bootstrap/Bootstrap Italia. */
    bsSize?: 'lg' | 'sm';
    size?: number;
    /** Etichetta del campo Input. */
    label?: string | ReactNode;
    /** Etichetta del pulsante incremento. */
    incrementLabel?: string | ReactNode;
    /** Etichetta del pulsante decremento. */
    decrementLabel?: string | ReactNode;
    /** Testo di esempio da utilizzare per il campo. */
    placeholder?: string;
    /** Testo di validazione per l'elemento del moduleo form. */
    validationText?: string;
    /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `Input` abbia la prop `id` impostata. */
    infoText?: string;
    /** Il valore nel campo Input. */
    value?: string | number;
    /** Da utilizzare per impedire la modifica del valore contenuto. */
    readOnly?: boolean;
    /** Associato all'attributo readOnly mostra il campo con lo stile classico, mantenendo lo stato di sola lettura. */
    normalized?: boolean;
    /** Utilizzare per mostrare il successo nella validazione del valore nel campo Input */
    valid?: boolean;
    innerRef?: Ref<HTMLInputElement>;
    /** Utilizzare per mostrare testo statico non modificabile. */
    plaintext?: boolean;
    /** Utilizzare per mostrare un elemento un simbolo attivando la proprietà addon nel campo input all'interno del componente */
    addonText?: string;
    /** Oggetto contenente la nuova mappatura per le classi CSS. */
    cssModule?: CSSModule;
    /** Classi aggiuntive da usare per il wrapper del componente Input */
    wrapperClassName?: string;
    /**
     * Classi aggiuntive da usare per il wrapper del componente Input.
     * @deprecated. Usare `wrapperClassName`.
     * */
    wrapperClass?: string;
    /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
    tag?: ElementType;
    /** Classi aggiuntive da usare per il componente Input */
    className?: string;
    /**
     * Usare "plaintext".
     * @deprecated
     */
    static?: boolean;
    /** Quando attivo rimuove il componente contenitore dell'Input. Utile per un controllo maggiore dello styling */
    noWrapper?: boolean;
    /** Indica che il componente ha un bottone a destra rispetto all'input */
    hasButtonRight?: boolean;
    /** Componente per il bottone */
    buttonRight?: ReactNode;
    /** Indica che il componente ha una icona a sinistra rispetto all'input */
    hasIconLeft?: boolean;
    /** Componente per l'icona */
    iconLeft?: ReactNode;
    testId?: string;
}
export declare const Input: ({ id, className, cssModule, type, tag, addonText, static: staticInput, plaintext, innerRef, label, incrementLabel, decrementLabel, validationText, infoText, placeholder, normalized, value, wrapperClass: originalWrapperClassOld, wrapperClassName: originalWrapperClass, size, testId, noWrapper, hasButtonRight, buttonRight, hasIconLeft, iconLeft, ...attributes }: InputProps) => React.JSX.Element;
export {};