input
Select

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ámetroTipoRequeridoDefaultDescripcion
optionsInputSelectItemOptionBaseProps[]Lista de opciones disponibles en el select.
filterOptionsfunctionnoundefinedFunció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.
defaultValueInputSelectItemOptionBasePropsnoundefinedValor 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.
useSwichtypeSelectStylebooleannofalsePermite alternar entre estilos de tipo select.
useTOptionbooleannofalseIndica si se debe usar una opción traducida (useTOption).
valueInputSelectItemOptionBasePropsnoValor actual del select.
noResultInputSelectItemOptionBasePropsnoValor que se muestra cuando no hay resultados en la búsqueda.
loaderOptionInputSelectItemOptionBasePropsnoOpción que se muestra mientras se cargan las opciones.
selectedInputSelectItemOptionBasePropsnoOpción actualmente seleccionada.
createInputSelectItemOptionBasePropsnoOpción que permite crear un nuevo valor en el select.
onCreatefunctionnoFunción que se ejecuta cuando se crea un nuevo valor.
isSelectClearTextbooleannofalseIndica si se puede limpiar el texto del select.
isSelectChangeTextbooleannotrueIndica si se puede cambiar el texto del select.
onChangefunctionnoFunción que se ejecuta cuando cambia el valor seleccionado.
onChangeDatafunctionnoFunción que se ejecuta cuando cambia el valor de los datos seleccionados.
onChangeTextfunctionnoFunción que se ejecuta cuando cambia el texto del select.
onChangeValidatefunctionnoFunción personalizada de validación que se ejecuta cuando cambia el valor del select.
iconCloseMovilReactNodeno<Cancel />Ícono que se muestra para cerrar el select en vista móvil.
clearContentReactNodeno'Clear'Contenido que se muestra para limpiar la selección.
searchByIdbooleannofalseIndica si la búsqueda se realiza por ID.
iconSearchReactNodeno<SVGSearch />Ícono de búsqueda que se muestra en el select.
changeByFirstOptionInOnBlurbooleannofalseCambia al valor de la primera opción cuando el input pierde el foco.
maxLengthShowOptionsnumberno20Cantidad máxima de opciones que se muestran.
nItemsnumbernoNúmero de ítems que se muestran en el select.
showOptionIconImgbooleannotrueMuestra íconos de imagen junto a las opciones del select.
validatorDataFenextjsValidatorClassnoClase de validación utilizada para validar los datos de entrada del select.
forceShowOptionOnLoadbooleannofalseForza a mostrar las opciones al cargar el componente.
iconDeleteReactNodeno<Trash />Ícono personalizado para eliminar una opción.
useSearchbooleannotrueDetermina 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")}
/>