'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Formularios
Select
Elige una o varias opciones de una lista en un popover: búsqueda, borrar, etiquetas con +N, grupos, descripciones e íconos, un prefijo, estados de carga y vacío, una acción al pie y virtualización para listas largas. Mismas variantes y tamaños que TextField.
import { Select, SelectItem, SelectSection } from '@alea/ui';
Ejemplos
Eligen
Opciones a partir de una lista de objetos.
Descripciones e íconos
Las opciones pueden llevar una descripción y un ícono.
Secciones y validación
Agrupa opciones; márcalo como obligatorio.
Múltiple
selectionMode="multiple" mantiene la lista abierta mientras eliges; el disparador muestra las primeras etiquetas y +N para el resto (maxTags).
Búsqueda, borrar y pie
searchable pone un cuadro de filtro arriba de la lista; isClearable agrega un botón de borrar; footer lleva una acción debajo de las opciones.
Variantes y tamaños
Las mismas variantes y tamaños que TextField, así los formularios se alinean: outline, filled, underline, borderless; de xs a xl.
Prefijo, carga y vacío
prefix agrega un ícono antes del valor; isLoading cambia el chevron por un spinner; emptyText dice qué muestra la lista sin opciones.
2.000 opciones, virtualizadas
Solo las opciones visibles están en la página; pasa la altura de fila. Combínalo con searchable para listas largas.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Check Position
checkPosition - Clearable
isClearable - Label Position
labelPosition - Show Optional
showOptional - Size
size - Variant
variant
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Medidas
Medido del componente renderizado a 2x: alto, ancho, padding, radio e icono.
| size | Alto | Ancho | Padding (y · x) | Radio | Tamaño de texto | Icono | Separación |
|---|---|---|---|---|---|---|---|
xs | - | - | - | - | - | - | - |
sm | - | - | - | - | - | - | - |
md | - | - | - | - | - | - | - |
lg | - | - | - | - | - | - | - |
xl | - | - | - | - | - | - | - |
Cada tamaño y espacio es múltiplo de 4 px.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-bg…--alea-border…--alea-border-strong…--alea-field-bg…--alea-focus…--alea-focus-halo…--alea-status-danger…--alea-status-danger-bg…--alea-status-warning…--alea-status-warning-bg…--alea-surface-hover…--alea-surface-raised…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…
Size
--alea-size-field…
Radius
--alea-radius-field…--alea-radius-full…
Type
--alea-font-family-body…--alea-font-size-base…--alea-font-size-md…--alea-font-size-sm…--alea-font-weight-regular…
Motion
--alea-motion-duration-base…--alea-motion-duration-fast…--alea-motion-ease-out…
Component
--alea-input-font…--alea-input-h…--alea-input-pad…--alea-input-radius…
Props
Select props
Elige una o varias opciones de una lista en un popover; escribe para saltar, flechas para moverte. Búsqueda, borrar, etiquetas, grupos, un pie y virtualización cuando los necesites.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
checkPosition | "start" | "end" | 'end' | Dónde aparece el check de seleccionado: end (por defecto) o start. |
description | ReactNode | - | Texto de ayuda bajo el campo. |
emptyText | ReactNode | - | Lo que dice la lista cuando no hay opciones ni coincidencias. Por defecto "Sin resultados". |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Texto de error, mostrado cuando es inválido. |
footer | ReactNode | - | Contenido debajo de la lista dentro del popover, como un botón "Agregar opción". |
isClearable | boolean | - | Muestra un botón de borrar mientras hay algo seleccionado. |
isLoading | boolean | - | Muestra un spinner en lugar del chevron, para opciones que todavía cargan. |
items | Iterable<T> | - | Las opciones. Para secciones, anida SelectSection y SelectItem como hijos. |
label | ReactNode | - | La etiqueta visible. |
labelPosition | "top" | "side" | 'top' | top (por defecto) o side (desde 640 px). |
maxTags | number | 2 | Con selectionMode="multiple": cuántas etiquetas se muestran en el disparador antes de "+N". Por defecto 2. |
motion | MotionProp | - | Cómo entra y sale el popup: un preset (fade, scale, pop, slide-down, blur...), false para ninguno, u opciones. |
prefix | ReactNode | - | Un ícono o texto dentro del disparador, antes del valor. |
renderValue | ((items: T[]) => ReactNode) | - | Tu propio contenido para el disparador, a partir de los elementos seleccionados. |
searchable | boolean | - | Un cuadro de búsqueda arriba de la lista que filtra las opciones. |
showOptional | boolean | - | Muestra "(opcional)" después de la etiqueta. |
size | Responsive<"xs" | "sm" | "md" | "lg" | "xl"> | - | xs 28 px, sm 32 px, md 44 px (por defecto), lg 48 px, xl 56 px. Puede cambiar por breakpoint. |
variant | "filled" | "outline" | "underline" | "borderless" | 'outline' | outline (por defecto), filled, underline o borderless, como TextField. |
virtualized | number | - | Muestra solo las opciones visibles: pasa la altura de fila (40). Para listas de miles. |
warningMessage | ReactNode | - | Una advertencia que no bloquea, mostrada bajo el campo en ámbar. |
SelectItem props
Una opción en un Select (o en cualquier listbox).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
description | ReactNode | - | Una segunda línea bajo la opción. |
icon | ReactNode | - | Un ícono antes de la opción. |
SelectSection props
Un grupo de opciones con título.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
titleobligatoria | ReactNode | - | El título de la sección. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Size
Oscuro
size="sm" | size="md" | size="lg" | |
|---|---|---|---|
Plan | Plan | Plan |
Claro
size="sm" | size="md" | size="lg" | |
|---|---|---|---|
Plan | Plan | Plan |
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
Select
- Variantes
checkPositionstartendlabelPositiontopsidevariantfilledoutlineunderlineborderless- Estados
- HoverOpenKeyboard focusInvalidFocusDisabledPlaceholder
- Motion
- morphnudgeAcepta una prop motion para su entrada y salida.
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-listbox-empty.alea-select.alea-label-required.alea-label-optional.alea-select-control.alea-select-trigger.alea-input-affix.alea-select-prefix.alea-select-value.alea-select-tags.alea-select-tag.alea-select-chevron- Atributos data
data-warningdata-variant=filleddata-variant=underlinedata-variant=borderlessdata-more
SelectItem
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-option-icon.alea-option-text.alea-option-desc.alea-option-check- Atributos data
data-check=startdata-on
SelectSection
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-option-section.alea-option-header
Accesibilidad
- El disparador es un botón con la etiqueta y el valor; la lista es un listbox.
- Al escribir salta a las opciones que coinciden.
- Un select nativo oculto lo mantiene funcionando en formularios y autocompletado.
Teclado
| Tecla | Acción |
|---|---|
| Enter, Espacio, Flecha abajo | Abre la lista |
| Flechas | Se mueven entre opciones |
| Enter | Elige la opción con foco |
| Escape | Cierra sin cambiar |
| Letras | Salta a una opción |
Qué hacer y qué evitar
Hacer
- Ordena las opciones como la gente espera (alfabético, por frecuencia).
Evitar
- No lo uses para dos o tres opciones: muéstralas como Radio o SegmentedControl.
En Figma
Set del disparador de Select (Size × State) y un Listbox con variantes de Option.