K
KoreUI

Transfer

UI

Selector de doble lista para mover elementos entre disponibles y seleccionados, con casillas, búsqueda y botones. El patrón clásico de back-office: asignar roles, elegir columnas visibles, miembros de un grupo.

Requiere Livewire. kore::transfer guarda el array de valores seleccionados con wire:model en un componente Livewire real; el contenedor va con wire:ignore. Fuera de ese contexto no tiene dónde sincronizar el estado.

En vivo

Marca casillas y usa los botones para mover elementos entre paneles, o busca dentro de cada uno. Es un componente Livewire real: el estado de abajo se actualiza en cada movimiento.

Permisos — uso básico

Disponibles
Seleccionados

selectedRoles: ["edit"]

Columnas visibles — paneles y buscador personalizados

Ocultas
Visibles

visibleColumns: ["name","email"] 

{{-- Uso básico --}}
<x-kore::transfer
    wire:model="selectedRoles"
    label="Permisos"
    :items="$items"
/>

{{-- Paneles y buscador personalizados --}}
<x-kore::transfer
    wire:model="visibleColumns"
    label="Columnas visibles"
    :items="$columnItems"
    :titles="['Ocultas', 'Visibles']"
    :searchable="false"
/>
{{-- Uso básico --}}
<x-kore::transfer
    wire:model="selectedRoles"
    label="Permisos"
    :items="$items"
/>

{{-- Paneles y buscador personalizados --}}
<x-kore::transfer
    wire:model="visibleColumns"
    label="Columnas visibles"
    :items="$columnItems"
    :titles="['Ocultas', 'Visibles']"
    :searchable="false"
/>

Cómo funciona

Casilla y botones, con búsqueda independiente por panel.

  • Casilla + botones. Marca elementos en cualquiera de los dos paneles y usa › / ‹ para mover los seleccionados, o » / « para mover todos de una vez.
  • Búsqueda independiente por panel. Cada panel filtra por su propia etiqueta. Con searchable=false el buscador desaparece — útil cuando la lista es corta.
  • wire:ignore + plugin Alpine. El contenedor lleva wire:ignore: el plugin KoreTransfer gestiona el DOM de los paneles y sincroniza la selección con $wire.$set(model, valores) en cada cambio.
  • El orden lo marca items. Las listas de cada panel se derivan filtrando items por el array target — la fuente de verdad —, así que el orden original de items se respeta en los dos paneles.

Props

Prop Tipo Default Descripción
items array [] Opciones: value y label por cada elemento
wire:model string — La propiedad Livewire donde vive el array de valores seleccionados
searchable bool true Muestra el buscador en cada panel
titles array Disponibles / Seleccionados Encabezados de los dos paneles
label string null Etiqueta del campo
hint string null Texto de ayuda bajo el campo
name string null Nombre del campo, para formularios y errores
error string null Mensaje de error a mostrar
required bool false Marca el campo como obligatorio
disabled bool false Desactiva la interacción
readonly bool false Las listas se leen y se buscan, pero no se marca ni se mueve nada, y el valor se sigue enviando
showError bool true Muestra el mensaje de error automático de validación
Cargando