InputSelectMultipleT

El componente InputSelectMultipleT es una variante de InputSelectMultiple que permite seleccionar múltiples opciones de un tipo genérico T. Incluye la funcionalidad de conversión personalizada para manejar los datos y su representación en el select.

Ejemplo

Importación

Para importar el componente InputSelectMultipleT, se puede hacer desde fenextjs

import { InputSelectMultipleT } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Descripcion
defaultValue	T[]	no	Valores por defecto seleccionados en el select.
value	T[]	no	Valores actualmente seleccionados.
options	T[]	sí	Lista de opciones disponibles para seleccionar.
onChange	(v?: T[]) => void	no	Función que se ejecuta cuando cambian los valores seleccionados.
onParse	(v?: T) => InputSelectItemOptionBaseProps<T>	sí	Función utilizada para convertir cada valor del tipo `T` en una opción seleccionable para el componente `InputSelectMultiple`.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

Uso básico de InputSelectMultipleT

const options = [
  { id: 1, name: "Option 1" },
  { id: 2, name: "Option 2" },
  { id: 3, name: "Option 3" },
];
 
<InputSelectMultipleT
  options={options}
  onParse={(option) => ({ label: option.name, value: option.id })}
  onChange={(selected) => console.log(selected)}
/>;

InputSelectMultipleT con valores por defecto

const options = [
  { id: 1, name: "Option 1" },
  { id: 2, name: "Option 2" },
  { id: 3, name: "Option 3" },
];
 
<InputSelectMultipleT
  defaultValue={[options[0], options[1]]}
  options={options}
  onParse={(option) => ({ label: option.name, value: option.id })}
  onChange={(selected) => console.log(selected)}
/>;

Selectmultiple Selectnumber