Transfer

TxTransfer moves entries between a source list and a target list. It is useful for permission assignment, channel selection, and member grouping. The component is controlled, so the host keeps selected keys through v-model.

Basic Usage

Filterable transfer

When filterable is enabled, both panels show a filter input. Use emptyText to localize the empty state.

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref<Array<string | number>>(['release'])
const data = [
  { key: 'release', label: 'Release channel' },
  { key: 'beta', label: 'Beta channel' },
  { key: 'snapshot', label: 'Snapshot channel' },
  { key: 'internal', label: 'Internal rollout', disabled: true },
]
</script>

<template>
  <TxTransfer
    v-model="selected"
    :data="data"
    :titles="['Available channels', 'Selected']"
    filterable
    filter-placeholder="Filter channels"
    empty-text="No items"
    add-aria-label="Add selected channels"
    remove-aria-label="Remove selected channels"
  />
</template>

API (Lite)

Property	Type	Description
modelValue		Keys shown in the target list
data		Complete item list with key, label, and optional disabled
titles		Source and target panel titles
filterable		Whether to show filter inputs
filterPlaceholder		Placeholder for the filter input
emptyText		Text shown when a panel is empty
addAriaLabel		Accessible label for the add action button
removeAriaLabel		Accessible label for the remove action button
targetOrder	originalpush	Sort target items by original data order or append order

Events

Event	Payload	Description
`update:modelValue`	`Array<string \| number>`	Selected keys update
`change`	`Array<string \| number>`	Selected keys changed

Source

View source

packages/tuffex/packages/components/src/transfer/index.ts