componentes / select

Select

Combobox accesible con navegación por teclado, búsqueda al escribir y un estilo detallado con icono/descripción por opción.

Cómo usar

Combobox accesible (`role="combobox"` + `listbox`) con navegación por teclado, typeahead y selección controlada o no. Activa `searchable` para filtrar por texto y `variant="detailed"` para opciones con `leading` y `description`.

preview

País

Búsqueda

Select.tsx

import { Select } from "vaiperui";
 
<Select
  label="País"
  placeholder="Elige un país"
  searchable
  options={[
    { value: "br", label: "Brasil" },
    { value: "us", label: "Estados Unidos" },
    { value: "pt", label: "Portugal" },
  ]}
/>

Colores

preview

País

primary

País

success

País

warning

País

danger

colores.tsx

<Select variantColor="primary" label="País" options={options} />
<Select variantColor="success" label="País" options={options} />
<Select variantColor="warning" label="País" options={options} />
<Select variantColor="danger" label="País" options={options} />

Estilos

`detailed` amplía el botón y las opciones, con slot `leading` y `description` por ítem.

preview

País

default

País

detailed

estilos.tsx

<Select variant="default" label="País" options={options} />
<Select variant="detailed" label="País" options={options} />

Tamaños

preview

País

tamanos.tsx

<Select size="sm" label="País" options={options} />
<Select size="md" label="País" options={options} />
<Select size="lg" label="País" options={options} />

Radio

preview

País

none

País

full

radio.tsx

<Select radius="none" label="País" options={options} />
<Select radius="sm" label="País" options={options} />
<Select radius="md" label="País" options={options} />
<Select radius="lg" label="País" options={options} />
<Select radius="full" label="País" options={options} />

Búsqueda

`searchable` agrega un campo para filtrar las opciones por texto.

preview

País

searchable

País

searchStyle full

País

sin búsqueda

busqueda.tsx

<Select searchable label="País" options={options} />
<Select searchable searchStyle="full" label="País" options={options} />
<Select label="País" options={options} />

Estados

`disabled` bloquea todo el select. Una opción con `disabled: true` aparece bloqueada y no se puede elegir.

preview

País

opción deshabilitada

País

disabled

estados.tsx

<Select label="País" options={options} disabled />
 
const options = [
  { value: "br", label: "Brasil" },
  { value: "pt", label: "Portugal", disabled: true },
]

Color personalizado

`customColor` sobrescribe `variantColor` y pinta foco, borde y resaltado desde un único color.

preview

País

naranja

País

verde

País

violeta

custom-color.tsx

<Select customColor="#ff6600" label="País" options={options} />
<Select customColor="#22c55e" label="País" options={options} />
<Select customColor="#a78bfa" label="País" options={options} />

Props

Prop	Valores	Predeterminado	Descripción
options	SelectOption[]	—	Lista de opciones ({ value, label, disabled?, description?, leading? })
value / defaultValue	string	—	Controlado / no controlado
onValueChange	(value: string) => void	—	Se dispara al seleccionar una opción
placeholder	string	"Select an option"	Texto cuando no hay nada seleccionado
emptyMessage	string	"No options found"	Texto cuando no hay opciones
noResultsMessage	(query: string) => string	(query) => `No results for "${query}"`	Texto cuando la búsqueda no tiene resultados; recibe el término escrito
searchable	boolean	false	Muestra un campo de búsqueda dentro del menú para filtrar por texto
searchPlaceholder	string	"Search..."	Placeholder del campo de búsqueda
clearSearchLabel	string	"Clear search"	Nombre accesible del botón que limpia la búsqueda
searchStyle	"boxed" \| "full"	"boxed"	`boxed`: campo con margen y redondeado. `full`: el campo ocupa todo el ancho de la parte superior del menú, con divisor
variant	default \| detailed	default	default: dropdown compacto de una línea. detailed: botón y opciones más grandes, con leading y description por opción y tinte en la seleccionada
variantColor	primary \| success \| warning \| danger	primary	Color de foco, borde abierto y resaltado de la opción
customColor	color CSS válido \| { light, dark }	—	Sobrescribe variantColor: pinta foco, borde y resaltado desde un único color, o desde un objeto { light, dark }
size	sm \| md \| lg	md	Altura del botón y de las opciones
radius	none \| sm \| md \| lg \| full	md	Redondeo del botón y del menú
animation	none \| smooth \| fast \| bounce	smooth	Transición del menú
disabled	boolean	false	Deshabilita todo el select
name	string	—	Replica el valor en un <input type="hidden"> para enviarlo en formularios
label / aria-label / id / className / style	string / string / string / string / CSSProperties	—	Etiqueta sobre el botón, nombre accesible cuando no hay etiqueta y props de diseño
option.leading / option.description	ReactNode / string	—	Slot visual (bandera, icono, avatar) antes del texto y segunda línea por opción. El slot funciona en ambas variantes; la description solo se renderiza con variant="detailed"