'/%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
ListBox
Una lista de opciones para elegir, en la página en lugar de un popup: selección simple o múltiple, secciones, descripciones e íconos, un check a cualquier lado, escribir para saltar, scroll dentro de una altura.
import { ListBox, SelectItem, SelectSection } from '@alea/ui';
Ejemplos
ListBox
Opciones en la página: selección simple con descripciones e íconos. Las flechas se mueven, escribir salta.
Múltiple, secciones y plain
selectionMode="multiple" con el check al inicio, secciones con títulos, y el estilo plain dentro de tu propio contenedor con altura con scroll.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Check Position
checkPosition - Variant
variant - Orientation
orientation
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.
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-accent-subtle…--alea-border…--alea-focus…--alea-surface…--alea-text-muted…
Radius
--alea-radius-md…
Type
--alea-font-size-sm…
Props
ListBox props
Una lista de opciones para elegir, sola (no en un popup): ajustes, filtros, listas laterales. Selección simple o múltiple, secciones, descripciones e íconos, escribe para saltar.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
checkPosition | "start" | "end" | 'end' | Dónde aparece el check de seleccionado: end (por defecto) o start. |
emptyText | ReactNode | - | Lo que se muestra cuando la lista está vacía. |
items | Iterable<T> | - | Las opciones como datos, o hijos SelectItem y SelectSection. |
maxHeight | string | number | - | Tiene scroll dentro de esta altura. |
variant | "plain" | "card" | 'card' | Dibuja la lista como una tarjeta con borde (por defecto), o plain dentro de tu propio contenedor. |
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.
ListBox
- Variantes
checkPositionstartendvariantplaincard- Estados
- Keyboard focusSelected
- 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-listbox-standalone- Atributos data
data-variant=card
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
- Un listbox: las flechas se mueven, Espacio o Enter eligen, al escribir salta a la opción que empieza con esas letras.
- Las opciones elegidas se anuncian como seleccionadas; las deshabilitadas se saltan.
- Dale una etiqueta visible con aria-labelledby, o un aria-label.
Teclado
| Tecla | Acción |
|---|---|
| Flecha arriba / Abajo | Se mueven |
| Espacio o Enter | Eligen |
| Shift + flecha | Amplía la selección (múltiple) |
| ⌘A / Ctrl+A | Selecciona todo (múltiple) |
| Inicio / Fin | Primera o última opción |
| Escribe letras | Salta a una coincidencia |
Qué hacer y qué evitar
Hacer
- Úsalo cuando las opciones deben quedar a la vista: ajustes, un filtro lateral, una lista corta.
Evitar
- No lo uses para navegar: usa enlaces.
- No pongas listas largas sin maxHeight o una búsqueda.