Checkbox List

Panoramica

Il componente CheckboxList permette di visualizzare una lista di checkbox generate dinamicamente a partire da un array di oggetti. Basato su Material UI, supporta layout orizzontale o verticale, gestione dello stato di selezione e callback di cambiamento.

---

Importazione

import { CheckboxList } from "@/components/CheckboxList";

---

Utilizzo di base

<CheckboxList
  label="Interessi"
  listElements={categories}
  listOfSelectedElements={selectedCategories}
  labelPropertyId="id"
  labelPropertyName={["name"]}
  onChange={(item) => handleCategoryToggle(item)}
  helperText="Seleziona almeno un interesse"
  required
  isHorizontal
/>

• categories e selectedCategories sono array di oggetti con proprietà id e name.
• Al click su ogni checkbox viene invocato onChange con l’elemento associato.

---

Proprietà (CheckboxListProps)

Prop	Tipo	Default	Descrizione
labelPropertyId	string	—	Nome della proprietà univoca di identificazione in ogni elemento (es. id).
labelPropertyName	string[]	—	Array di proprietà da concatenare per formare l’etichetta della checkbox (es. ['firstName','lastName']).
listElements	any[]	—	Array di oggetti che rappresentano tutte le opzioni disponibili.
listOfSelectedElements	any[]	—	Array di oggetti selezionati. Utilizzato per calcolare checked.
onChange	(element: any) => void	—	Callback invocato al cambio di stato di una checkbox. Riceve l’elemento toggled.
helperText	string	—	Testo di supporto visualizzato sotto le checkbox (opzionale).
required	boolean	false	Se impostato su true, rende il campo obbligatorio.
label	string	—	Etichetta generale mostrata sopra il gruppo di checkbox.
isHorizontal	boolean	false	Se true, dispone le checkbox in riga (row), altrimenti in colonna.

---

Comportamento

1. Rendering: genera un FormControl con FormGroup e una lista di FormControlLabel per ogni oggetto in listElements.
2. Selezione: ogni checkbox è considerata selezionata se un elemento in listOfSelectedElements ha lo stesso valore di labelPropertyId.
3. Callback: al click su una checkbox, viene chiamata onChange(element) passando l’oggetto corrispondente.
4. Layout: si può scegliere tra layout orizzontale (isHorizontal=true) o verticale.
5. Helper text: se helperText è valorizzato, viene mostrato sotto le checkbox.
6. Validazione: se required=true e non viene selezionato nulla, il FormControl evidenzia l’errore (gestibile dal form di livello superiore).

---

Esempio completo

interface Category { id: number; name: string; }

function CategorySelector() {
  const categories: Category[] = [
    { id: 1, name: "Sport" },
    { id: 2, name: "Musica" },
    { id: 3, name: "Viaggi" }
  ];
  const [selected, setSelected] = useState<Category[]>([]);

  function handleToggle(category: Category) {
    const exists = selected.some(c => c.id === category.id);
    setSelected(prev =>
      exists ? prev.filter(c => c.id !== category.id) : [...prev, category]
    );
  }

  return (
    <form>
      <CheckboxList
        label="Interessi"
        listElements={categories}
        listOfSelectedElements={selected}
        labelPropertyId="id"
        labelPropertyName={["name"]}
        onChange={handleToggle}
        helperText={selected.length === 0 ? "Seleziona almeno un interesse" : ""}
        required
        isHorizontal={false}
      />
      <button type="submit">Invia</button>
    </form>
  );
}