Formularios

MultiSelect

Elige varias opciones con casillas; el disparador resume lo elegido. Incluye búsqueda, Seleccionar todo y Borrar.

import { MultiSelect } from '@alea/ui';

Ejemplos

Elige varias

El disparador resume lo elegido; la búsqueda aparece con muchas opciones.

Topics

2 picked

Sin acciones

Una lista corta sin Seleccionar todo, y una deshabilitada.

Plans

Regions

Estados

Cada estado de interacción, forzado para compararlos, en ambos temas.

Oscuro

Habilitado

Hover

Foco

Presionado

Disabled

Claro

Habilitado

Hover

Foco

Presionado

Disabled

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…
--alea-accent-on…
--alea-text-muted…

Type

--alea-font-size-sm…
--alea-font-size-xs…

Props

`MultiSelect` props

Elige varias opciones de una lista con casillas; el disparador resume lo elegido.

Prop	Tipo	Por defecto	Descripción
`items`obligatoria	`{ id: Key; label: string; description?: string \| undefined; }[]`	-	Las opciones: id, label, description opcional.
`defaultValue`	`Key[]`	-	Los ids seleccionados 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`	`((keys: Key[]) => void)`	-	Se llama con los ids seleccionados.
`placeholder`	`string`	-	Se muestra mientras no hay valor.
`searchable`	`boolean`	-	Agrega un campo de búsqueda a la lista. Por defecto true cuando hay más de 8 items.
`showActions`	`boolean`	`true`	Agrega "Seleccionar todo" y "Borrar". Por defecto true.
`value`	`Key[]`	-	Los ids seleccionados (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: morph nudge hint moreAcepta 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-ms.alea-multiselect.alea-select-trigger.alea-select-value.alea-select-chevron.alea-select-popover.alea-multiselect-dialog.alea-multiselect-actions.alea-link.alea-multiselect-list.alea-listbox-empty.alea-check-box
Atributos data: data-on

El disparador lee la etiqueta y lo elegido.
La lista es un listbox con aria-multiselectable.

Teclado

Tecla	Acción
`Enter` o `Espacio`	Abre
`Flechas`	Se mueven
`Espacio`	Alterna una opción
`Escape`	Cierra

Qué hacer y qué evitar

Hacer

Muestra cuántos hay elegidos en el disparador.
Agrega Seleccionar todo y Borrar en listas largas.

Evitar

No lo uses para dos o tres opciones: usa casillas.
No escondas lo elegido: resúmelo en el disparador.