'/%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
Transfer
Mueve elementos entre dos listas, con búsqueda.
import { Transfer } from '@alea/ui';
Ejemplos
Transfer
Elige de un lado, mueve con los botones.
All plugins
7Palette Generator
Type Scale
Color Blindness
Token Drift
Token Converter
A11y Handoff
Text Stress Test
In your bundle
1Contrast Checker
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…--alea-surface…--alea-text-faint…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…
Radius
--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Props
Transfer props
Mueve elementos entre dos listas: disponibles y elegidos.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
itemsobligatoria | TransferItem[] | - | Todos los elementos: id y label. |
defaultValue | Key[] | - | Los ids a la derecha al inicio. |
onChange | ((keys: Key[]) => void) | - | Se llama con los ids a la derecha. |
searchable | boolean | - | Agrega un campo de búsqueda a cada lista. |
titles | [string, string] | - | Títulos de las dos listas. |
value | Key[] | - | Ids del lado derecho (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.
- 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-transfer-side.alea-transfer-head.alea-transfer-empty.alea-transfer-list.alea-transfer.alea-transfer-actions
Accesibilidad
- Dos listas con etiqueta; los botones de mover dicen cuántos elementos mueven y a dónde.
Teclado
| Tecla | Acción |
|---|---|
| Flechas | Se mueven en una lista |
| Espacio | Elige un elemento |
| Tab | Va a los botones de mover y a la otra lista |
Qué hacer y qué evitar
Hacer
- Nombra ambas listas con claridad (Disponibles, Elegidos).
- Agrega búsqueda cuando alguna lista pasa de diez elementos.
Evitar
- No lo uses para menos de cinco elementos: usa casillas.
- No reordenes los elementos al moverlos.