'/%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
Cascader
Elige entre opciones anidadas columna por columna: país, luego ciudad.
import { Cascader } from '@alea/ui';
Ejemplos
Cascader
Flecha derecha o Enter abre el siguiente nivel.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Allows Parent Selection
allowsParentSelection
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-border…
Props
Cascader props
Elige entre opciones anidadas columna por columna: país, luego ciudad.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
optionsobligatoria | CascaderOption[] | - | El árbol de opciones: id, label, children. |
allowsParentSelection | boolean | - | Permite elegir también un padre, no solo el último nivel. |
defaultValue | Key[] | - | La ruta de ids al inicio. |
description | ReactNode | - | Texto de ayuda mostrado bajo el campo. |
isDisabled | boolean | - | Deshabilita todas sus partes. |
label | ReactNode | - | La etiqueta visible. |
motion | MotionProp | - | Cómo entra y sale el popup: un preset (fade, scale, pop, slide-down, blur...), false para ninguno, u opciones. |
onChange | ((path: Key[], options: CascaderOption[]) => void) | - | Se llama con la ruta de ids. |
placeholder | string | - | Se muestra mientras no hay valor. |
value | Key[] | - | La ruta de ids elegida (controlado). |
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.
- 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-cascader.alea-select-trigger.alea-select-value.alea-select-chevron.alea-cascader-popover.alea-cascader-columns.alea-cascader-col.alea-option-text.alea-menu-chevron.alea-option-check
Accesibilidad
- Cada columna es un listbox con el nombre de su padre.
Teclado
| Tecla | Acción |
|---|---|
| Flecha arriba / Abajo | Se mueven en una columna |
| Flecha derecha o Enter | Abre el siguiente nivel |
| Flecha izquierda | Vuelve al nivel anterior |
| Escape | Cerrar |
Qué hacer y qué evitar
Hacer
- Úsalo para jerarquías profundas pero predecibles (país, estado, ciudad).
- Muestra la ruta completa en el disparador.
Evitar
- No lo uses para más de cuatro niveles.
- No lo uses cuando la gente sabe el nombre final: usa Autocomplete.