wiki-Select

Ver en Git

---

Select

El componente Select proporciona una interfaz personalizable para seleccionar una o varias opciones de una lista. Soporta funcionalidades como búsqueda, opciones deshabilitadas, y estados de carga.

Referencia de la API

Props Comunes

Propiedad	Tipo	Requerido	Descripción
title	string | ReactNode	No	Título que se muestra en la parte superior del select.
options	SelectOptionProps<T>[]	Sí	Lista de opciones disponibles para seleccionar.
optionRender	(option: T) => ReactNode	No	Función para renderizar las opciones de manera personalizada.
loading	boolean	No	Indica si el componente está en estado de carga.
disabled	boolean	No	Desactiva el componente si es true.
placeholder	string	No	Texto que se muestra cuando no hay ninguna selección.
className	string	No	Clase CSS personalizada para el contenedor principal.
style	CSSProperties	No	Estilo CSS en línea para el contenedor principal.
pill	PillProps	No	Props adicionales para el componente Pill.
onChange	(value: T | T[]) => void	No	Función llamada cuando se selecciona una opción.
showSearch	boolean	No	Habilita la barra de búsqueda dentro del componente.
searchValue	string	No	Valor actual de búsqueda en el input.
onSearch	(input: string) => void	No	Función llamada al realizar una búsqueda.
dropdownClassName	string	No	Clase CSS personalizada para el menú desplegable.
aura-test	string	No	Identificador de prueba para el componente.

Props Específicas

SimpleSelect

Propiedad	Tipo	Requerido	Descripción
value	T	No	Valor seleccionado actual.
multiple	false	No	Indica que el select no permite múltiples selecciones.

MultipleSelect

Propiedad	Tipo	Requerido	Descripción
value	T[]	No	Lista de valores seleccionados.
multiple	true	Sí	Indica que el select permite múltiples selecciones.

Tipos de Opciones

Propiedad	Tipo	Requerido	Descripción
value	string | number	Sí	Valor único que representa la opción.
label	string	Sí (solo para opciones con etiqueta)	Etiqueta visible de la opción.
Element	JSX.Element	Sí (solo para opciones con componente)	Componente JSX para la opción personalizada.
disabled	boolean	No	Indica si la opción está deshabilitada.
disabledMsg	string	No	Mensaje que se muestra al intentar seleccionar una opción deshabilitada.

Ejemplo de Uso

Select Simple

import { Select } from '@auravant/ui-kit';

const options = [
 { value: '1', label: 'Opción 1' },
 { value: '2', label: 'Opción 2', disabled: true, disabledMsg: 'No disponible' },
 { value: '3', label: 'Opción 3' },
];

<Select
 title="Selecciona una opción"
 options={options}
 placeholder="Haz una selección"
 onChange={(value) => console.log('Seleccionado:', value)}
/>;

Select Múltiple

import { Select } from '@auravant/ui-kit';

const options = [
 { value: 1, label: 'Rojo' },
 { value: 2, label: 'Azul' },
 { value: 3, label: 'Verde' },
];

<Select
 title="Selecciona tus colores favoritos"
 options={options}
 multiple
 placeholder="Selecciona uno o más colores"
 onChange={(values) => console.log('Seleccionados:', values)}
/>;

Select con Búsqueda

import { Select } from './Select'

import { Select } from '@auravant/ui-kit';

const options = [
 { value: 'apple', label: 'Manzana' },
 { value: 'banana', label: 'Banana' },
 { value: 'cherry', label: 'Cereza' },
];

<Select
 title="Busca una fruta"
 options={options}
 showSearch
 placeholder="Escribe para buscar"
 onSearch={(input) => console.log('Buscando:', input)}
/>;