Todos los componentes (204)

Selector con árbol

Campos · TreeSelect

Qué es y cuándo usarlo

Un desplegable con un árbol dentro: elegir una categoría, un departamento o una carpeta de una jerarquía sin tener el árbol entero siempre a la vista. El campo es el del Select; el panel es el Tree.

Cuándo usarlo

Una jerarquía de la que se elige UNA cosa (o varias) y que no cabe como lista plana.

Cuándo no

Datos en niveles donde se elige una hoja siguiendo un camino (país > provincia > ciudad): Cascader.
El árbol tiene que verse siempre, como navegación o como filtro: el Tree suelto.

Una o varias: con selection="single" (por defecto) elegir un nodo cierra el panel; con "multiple" se queda abierto y lo elegido sale en el campo, en el orden del árbol. Cualquier nodo se puede elegir, rama u hoja, salvo los apagados. Las ramas que llevan a lo elegido se abren solas.

Teclado: Abajo o Arriba abren el campo; dentro, las del árbol (flechas, derecha abre una rama, izquierda la cierra o sube, Inicio y Fin, escribir para saltar, Intro o Espacio elige) y Escape cierra devolviendo el foco al campo.

Accesibilidad: el panel es un treegrid con el nombre del campo; el foco entra en la fila elegida o en la primera.

Formulario: con FormField (ver «Formulario»): value, onChange y onBlur se le pasan tal cual.

Aspecto fino: variables --amset-field-* del campo y --amset-tree-select-height (alto máximo del panel). Sin búsqueda dentro del panel todavía.

Cómo se ve

CategoríaLa del producto en el catálogo

Ropa

Camisas

Pantalones

Abrigos

Plumas

Lana

Calzado

Hogar

<TreeSelect
  label="Categoria"
  placeholder="Elige una categoria"
  branches={[
    { key: 'ropa', label: 'Ropa', children: [
      { key: 'abrigos', label: 'Abrigos', children: [{ key: 'lana', label: 'Lana' }] },
    ] },
    { key: 'hogar', label: 'Hogar' },
  ]}
  defaultValue="lana"
/>

Props

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

Prop	Tipo	Para qué sirve
`branches`obligatoria	`readonly TreeNode[]`	El arbol de opciones. Cualquier nodo se puede elegir, rama u hoja, salvo los apagados.
`label`obligatoria	`string`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultValue`	`string \| readonly string[] \| null`	—
`disabled`	`boolean`	—
`displayRender`	`(labels: readonly string[]) => ReactNode`	Como se enseña lo elegido en el campo cerrado. Recibe los nombres. Por defecto, separados por coma.
`error`	`string`	—
`hiddenLabel`	`boolean`	La etiqueta solo para el lector de pantalla.
`hint`	`string`	—
`id`	`string`	—
`initialOpenKeys`	`readonly string[]`	Ramas abiertas al empezar. Las que llevan a lo elegido se abren solas.
`invalid`	`boolean`	—
`name`	`string`	Para que lo elegido viaje en un formulario nativo: la clave (o, con varias, un campo por cada una).
`offset`	`number`	—
`onBlur`	`() => void`	Al salir del campo. Lo usa el formulario para marcar que se ha tocado.
`onChange`	`((key: string \| null) => void) \| ((keys: readonly string[]) => void)`	—
`placeholder`	`string`	—
`placement`	`Placement`	—
`readOnly`	`boolean`	—
`required`	`boolean`	—
`selection`	`"multiple" \| "single"`	—
`size`	`"sm" \| "md" \| "lg"`	—
`value`	`string \| readonly string[] \| null`	—
`variant`	`FieldVariant`	—

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

En el banco de pruebas

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