Multiselect Field

Panoramica

MultiSelectField è un componente di selezione basato su Material-UI che permette agli utenti di scegliere che permette di selezionare più opzioni e visualizzarle come chip. Supporta la validazione, la personalizzazione dello stile e la gestione degli eventi per offrire un'esperienza d'uso intuitiva e flessibile.

Importazione

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

Prop	Tipo	Default	Descrizione
list	SelectItem[]	—	Lista di opzioni disponibili. Ogni opzione deve avere almeno id e name.
value	(string | number)[]	[]	Array di valori selezionati.
selectChanged	(values: (string | number)[], isValid: boolean) => void	—	Callback eseguita a ogni cambiamento. Restituisce i valori selezionati e se il campo è valido.
label	string	—	Etichetta del campo.
required	boolean	false	Indica se il campo è obbligatorio.
isDisabled	boolean	false	Disabilita la select.
isFullWidth	boolean	false	Occupa tutta la larghezza del contenitore.
name	string	—	Nome del campo (utile nei form).
valueKey	"id" | "name"	"id"	Specifica quale chiave usare come valore.
defaultNullItemId	number	-1	Id per rappresentare un valore nullo (non selezionato).
accessibility	{ description?: string }	—	Testo descrittivo per screen reader.
sx	SxProps	—	Stili aggiuntivi MUI.
enableChipDelete	boolean	false	Mostra la X sulle chip per rimuovere rapidamente le opzioni selezionate.

Esempio di utilizzo

"use client";
import { useState } from "react";
import { MultiSelectField } from "@/components/fields/MultiSelectField";
import { SelectItem } from "@/types/utility.types";

export default function ExampleMultiSelect() {
  const [selectedValues, setSelectedValues] = useState<(string | number)[]>([]);

  const options: SelectItem[] = [
    { id: 1, name: "Frontend" },
    { id: 2, name: "Backend" },
    { id: 3, name: "DevOps" },
  ];

  return (
    <MultiSelectField
      label="Categorie"
      list={options}
      value={selectedValues}
      required
      isFullWidth
      enableChipDelete
      selectChanged={(values, isValid) => setSelectedValues(values)}
    />
  );
}