Select Field

Panoramica

SelectField è un componente di selezione basato su Material-UI che permette agli utenti di scegliere un'opzione da un elenco. Supporta la validazione, la personalizzazione dello stile e la gestione degli eventi per offrire un'esperienza d'uso intuitiva e flessibile.

Importazione

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

Proprietà (Props)

Nome	Tipo	Obbligatorio	Default	Descrizione
list	SelectItem[]	Si	[]	Lista degli elementi visualizzati nel menu a tendina. Ogni elemento deve avere un id e un name.
selectChanged	(idItemSelected: number, isValid: boolean) => void	No	undefined	Funzione di callback chiamata quando viene effettuata una selezione. Restituisce il valore selezionato e lo stato di validità.
sx	SxProps	No	undefined	Stili personalizzati per il sistema di styling di Material-UI.
value	string | number	No	-1	Il valore attualmente selezionato. Se impostato a -1, viene selezionata l'opzione predefinita.
label	string	No	""	Etichetta visualizzata sopra il campo di selezione.
required	boolean	No	false	Se impostato a true, viene applicata la validazione per assicurarsi che venga effettuata una selezione.
isDisabled	boolean	No	false	Se impostato a true, disabilita l'interazione dell'utente con il campo di selezione.
isFullWidth	boolean	No	false	Se impostato a true, il campo di selezione occuperà l'intera larghezza del contenitore.
name	string	No	""	Attributo name per la compatibilità con la sottomissione dei form.
valueKey	'name' | 'id'	No	'id'	Definisce se la selezione deve usare id o name come chiave per i valori.
defaultNullItemId	number	No	-1	Definisce il valore di default della prima option dell'elenco, quindi quella che rappresenta visivamente il "non selezionato".

Esempi di utilizzo

Utilizzo base

<SelectField
    label="Opzioni"
    list={[{ id: 1, name: "Opzione 1" }, { id: 2, name: "Opzione 2" }]}
    value={1}
    selectChanged={(id, isValid) => console.log("Selezionato: ", id, "Valido: ", isValid)}
/>

Con validazione e larghezza completa

<SelectField
    label="Elementi"
    list={[{ id: 1, name: "Elemento A" }, { id: 2, name: "Elemento B" }]}
    required={true}
    isFullWidth={true}
    selectChanged={(id, isValid) => console.log("Selezionato: ", id, "Valido: ", isValid)}
/>

SelectField disabilitato

<SelectField
    label="Elementi"
    list={[{ id: 1, name: "Elemento 1" }, { id: 2, name: "Elemento 2" }]}
    isDisabled={true}
    value={1}
/>

Comportamento e caratteristiche

• Se list è vuota, viene mostrato uno skeleton al posto della select.
• Il componente valida le selezioni se required è impostato a true, mostrando un messaggio di errore se nessuna selezione valida viene effettuata.
• Il segnaposto (...) viene mostrato quando nessuna selezione valida è presente.
• Il callback selectChanged restituisce il valore selezionato e il suo stato di validità.

Note

• Assicurati che list sia di tipo 'SelectItem' quindi ogni oggetto deve avere le proprietà id e name.
• Se si utilizza valueKey="name", assicurarsi che gli elementi della lista abbiano valori name univoci per evitare comportamenti inattesi.

---