Todos los componentes (204)

Selector en cascada

Campos · Cascader · .amset-cascader

Qué es y cuándo usarlo

País > provincia > ciudad en un solo campo, con una columna por nivel. Es lo que hasta ahora se montaba con varios Select encadenados, que no comparten estado ni teclado. El valor es la ruta: las claves de cada nivel, de la raíz a la hoja.

Cuándo usarlo

Datos en jerarquía donde se elige una hoja (o una rama con changeOnSelect): ubicaciones, categorías de producto, organigrama.

Cuándo no

Una lista plana: Select. Con un árbol que se quiere ver entero y elegir varios: Tree.

Teclado: Abajo o Arriba abren el campo; dentro, las flechas arriba y abajo recorren la columna, derecha entra en el nivel de dentro, izquierda vuelve al de fuera, Inicio y Fin van a los extremos, Intro o Espacio elige (o abre, si tiene hijos) y Escape cierra devolviendo el foco al campo.

Accesibilidad: cada columna es un listado con su nombre de nivel (levelLabels); las opciones con hijos dicen «con subniveles» además de llevar la flecha. Las apagadas no se eligen.

Carga diferida: una opción con isLeaf: false y sin children pide sus hijos con loadData(path) (la ruta hasta ella) la primera vez que se abre, y la columna dice «Cargando…».

Aspecto fino: variables --amset-field-* del campo y --amset-cascader-column-width y --amset-cascader-height.

Cómo se ve

Destino del envío

<Cascader
  label="Destino del envio"
  placeholder="Elige un destino"
  options={[
    { key: 'es', label: 'Espana', children: [
      { key: 'cadiz', label: 'Cadiz', children: [{ key: 'jerez', label: 'Jerez de la Frontera' }] },
    ] },
  ]}
  levelLabels={['Pais', 'Provincia', 'Ciudad']}
  defaultValue={['es', 'cadiz', 'jerez']}
/>

Props

Se importa con import { Cascader } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	—
`options`obligatoria	`readonly CascaderOption[]`	El arbol de opciones: pais > provincia > ciudad.
`changeOnSelect`	`boolean`	Se puede elegir una opcion que tiene hijos, no solo las hojas: «España» a secas sin bajar a una provincia. Por defecto, solo hojas.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultValue`	`CascaderPath`	La ruta elegida al empezar, sin controlarla desde fuera.
`disabled`	`boolean`	—
`displayRender`	`(labels: readonly string[]) => ReactNode`	Como se enseña lo elegido en el campo cerrado. Recibe los nombres de la ruta. Por defecto, «España / Madrid».
`error`	`string`	—
`hiddenLabel`	`boolean`	La etiqueta solo para el lector de pantalla.
`hint`	`string`	—
`id`	`string`	—
`invalid`	`boolean`	—
`levelLabels`	`readonly string[]`	El nombre de cada nivel para el lector de pantalla: `['País', 'Provincia', 'Ciudad']`.
`loadData`	`(path: CascaderPath) => Promise<readonly CascaderOption[]>`	Pide los hijos de una opcion la primera vez que se abre (carga diferida). La opcion lleva `isLeaf: false` y no trae `children`; se llama con su ruta.
`loadingText`	`string`	Lo que dice la columna mientras llegan los hijos. Por defecto, «Cargando…».
`name`	`string`	Para que lo elegido viaje en un formulario nativo: la CLAVE de la hoja (o de la ultima opcion elegida).
`offset`	`number`	—
`onBlur`	`() => void`	Al salir del campo. Lo usa el formulario para marcar que se ha tocado.
`onChange`	`(path: CascaderPath) => void`	Avisa de la ruta elegida. Cada clave es la de un nivel.
`placeholder`	`string`	—
`placement`	`Placement`	—
`readOnly`	`boolean`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	—
`value`	`CascaderPath`	La ruta elegida, de la raiz a la hoja, controlada desde fuera. `[]` es «nada elegido».
`variant`	`FieldVariant`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-cascader-column-width`	`11rem`
`--amset-cascader-height`	`16rem`

Cómo se cambia

.amset-cascader {
  --amset-cascader-column-width: ...;
  --amset-cascader-height: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: