InputSelectT

El componente InputSelectT es un select customizable que permite pasar opciones y valores de un tipo genérico T. Implementa funciones para manejar la conversión de los elementos seleccionados y permite personalizar la representación de los datos.

Ejemplo

Importación

Para importar el componente InputSelectT, se puede hacer desde fenextjs

import { InputSelectT } from "fenextjs";

Parámetros

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

Storybook

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

Usos

Uso básico de InputSelectT

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

InputSelectT con valor por defecto

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

Selectstate Selecttimezone