InputSelect

El componente InputSelect proporciona una interfaz interactiva que permite a los usuarios seleccionar opciones de una lista, con la posibilidad de búsqueda y personalización avanzada.

Ejemplo

Importación

Para importar el componente InputSelect, se puede hacer desde fenextjs

import { InputSelect } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
options	InputSelectItemOptionBaseProps[]	sí		Lista de opciones disponibles en el select.
filterOptions	function	no	undefined	Función personalizada para filtrar las opciones del select.
showOptions	'hover' \| 'focus' \| 'focus-hover'	no	'focus'	Define cuándo mostrar las opciones del select.
hiddenOptions	'not-hover' \| 'not-focus' \| 'not-focus-hover'	no	'not-hover'	Define cuándo ocultar las opciones del select.
defaultValue	InputSelectItemOptionBaseProps	no	undefined	Valor por defecto seleccionado en el select.
typeSelect	'div' \| 'select' \| 'datalist'	no	'div'	Define el tipo de elemento select.
typeSelectStyle	'normal' \| 'normal-out' \| 'box' \| 'list' \| 'checkbox'	no	'normal'	Estilos aplicados al componente select.
useSwichtypeSelectStyle	boolean	no	false	Permite alternar entre estilos de tipo select.
useTOption	boolean	no	false	Indica si se debe usar una opción traducida (useTOption).
value	InputSelectItemOptionBaseProps	no		Valor actual del select.
noResult	InputSelectItemOptionBaseProps	no		Valor que se muestra cuando no hay resultados en la búsqueda.
loaderOption	InputSelectItemOptionBaseProps	no		Opción que se muestra mientras se cargan las opciones.
selected	InputSelectItemOptionBaseProps	no		Opción actualmente seleccionada.
create	InputSelectItemOptionBaseProps	no		Opción que permite crear un nuevo valor en el select.
onCreate	function	no		Función que se ejecuta cuando se crea un nuevo valor.
isSelectClearText	boolean	no	false	Indica si se puede limpiar el texto del select.
isSelectChangeText	boolean	no	true	Indica si se puede cambiar el texto del select.
onChange	function	no		Función que se ejecuta cuando cambia el valor seleccionado.
onChangeData	function	no		Función que se ejecuta cuando cambia el valor de los datos seleccionados.
onChangeText	function	no		Función que se ejecuta cuando cambia el texto del select.
onChangeValidate	function	no		Función personalizada de validación que se ejecuta cuando cambia el valor del select.
iconCloseMovil	ReactNode	no	<Cancel />	Ícono que se muestra para cerrar el select en vista móvil.
clearContent	ReactNode	no	'Clear'	Contenido que se muestra para limpiar la selección.
searchById	boolean	no	false	Indica si la búsqueda se realiza por ID.
iconSearch	ReactNode	no	<SVGSearch />	Ícono de búsqueda que se muestra en el select.
changeByFirstOptionInOnBlur	boolean	no	false	Cambia al valor de la primera opción cuando el input pierde el foco.
maxLengthShowOptions	number	no	20	Cantidad máxima de opciones que se muestran.
nItems	number	no		Número de ítems que se muestran en el select.
showOptionIconImg	boolean	no	true	Muestra íconos de imagen junto a las opciones del select.
validatorData	FenextjsValidatorClass	no		Clase de validación utilizada para validar los datos de entrada del select.
forceShowOptionOnLoad	boolean	no	false	Forza a mostrar las opciones al cargar el componente.
iconDelete	ReactNode	no	<Trash />	Ícono personalizado para eliminar una opción.
useSearch	boolean	no	true	Determina si el selector filtra los elementos por el texto escrito.

Storybook

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

Usos

Básico

<InputSelect options={options} />

InputSelect con filtro de opciones

<InputSelect options={options} filterOptions={filterOptions} />

InputSelect con icono de búsqueda

<InputSelect options={options} iconSearch={<SVGSearch />} />

InputSelect con opción personalizada de crear

<InputSelect
  options={options}
  onCreate={() => console.log("Crear nueva opción")}
/>

Search Selectbuttonsgroup