Input Field

Panoramica

Il componente InputField è un campo di input personalizzato basato su InputBase di Material-UI. Supporta input singolo o multilinea, validazione dinamica (compresi controlli su email, numeri e numero minimo di caratteri), icone interattive, conteggio caratteri e gestione dello stato dell'input.

Importazione

import { InputField } from "@itlogix/itlogix-ui";

Proprietà (Props)

Nome	Tipo	Obbligatorio	Default	Descrizione
isFullWidth	boolean	no	false	Se true, l'input occupa il 100% della larghezza disponibile.
required	boolean	no	false	Se true, abilita la validazione del campo come obbligatorio.
isDisabled	boolean	no	false	Disabilita il campo di input.
sx	SxProps	no	undefined	Stili personalizzati applicabili tramite sistema MUI.
label	string	no	undefined	Etichetta visualizzata sopra il campo di input.
name	string	no	undefined	Attributo name del campo, utile per i form.
placeholder	string	no	""	Testo segnaposto all'interno dell'input.
inputRef	Ref<HTMLInputElement>	no	undefined	Ref personalizzato per accedere direttamente al campo.
type	'text'/'number'/'email'	no	'text'	Tipo di input. Supporta testo, numeri ed email.
defaultValue	string	no	undefined	Valore iniziale del campo.
value	string	no	undefined	Valore controllato del campo.
actionIcon	{ icon: IconDefinition, onClick: () => void, tooltip?: string }	no	undefined	Icona interattiva mostrata alla fine del campo.
inputChanged	(value: string, isValid?: boolean) => void	no	undefined	Funzione chiamata quando l'input cambia.
nRows	number	no	undefined	Numero di righe per input multilinea.
maxCharacters	number	no	undefined	Numero massimo di caratteri consentiti.
nOfCharactersRequired	number	no	undefined	Numero minimo di caratteri richiesto per la validazione.
infoMaxCharacters	boolean	no	false	Se true, mostra il conteggio caratteri (es: 10/30).

Esempi di utilizzo

Input base con etichetta

import { InputField } from "@itlogix/itlogix-ui";

<InputField
  label="Nome"
  name="nome"
  placeholder="Inserisci il tuo nome"
  required
/>

Input con validazione email

<InputField
  label="Email"
  type="email"
  required
  inputChanged={(val, valid) => console.log(val, valid)}
/>

Input multilinea con contatore caratteri

<InputField
  label="Messaggio"
  nRows={4}
  maxCharacters={200}
  infoMaxCharacters
/>

Input con icona di azione

import { InputField } from "@itlogix/itlogix-ui";

<InputField
  label="Codice promozionale"
  actionIcon={{ icon: faCheck, tooltip: "Applica", onClick: handleApply }}
/>

Comportamento

• La validazione cambia dinamicamente in base ai prop (required, type, nOfCharactersRequired).
• Mostra un messaggio di errore con icona se il campo non è valido.
• Se infoMaxCharacters è true, mostra: numero di caratteri inseriti / n. caratteri massimo.
• Il campo può simulare il submit del form premendo Enter (solo in input a singola riga).

---

Questa documentazione fornisce un riferimento completo per l'utilizzo del componente InputField nella tua libreria UI. 🚀