Forms

Transfer

@xui/transfer

A dual list-box — check items on either side and move them across with the arrow buttons. values (two-way) holds the keys on the right; each side has a header select-all and an optional search box.

Install

pnpm add @xui/transfer

Add the barrel to a standalone component's imports:

import { XuiTransferImports } from '@xui/transfer';

@Component({
  imports: [XuiTransferImports],
  // …
})

Examples

Basic

Loading preview…

<xui-transfer [items]="items" [(values)]="target" [titles]="['Available', 'Chosen']" />

Searchable

Loading preview…

<xui-transfer [items]="items" [(values)]="target" searchable />

API

XuiTransfer

component

xui-transfer

A dual list-box that moves items between a source and a target list. items is the full set; values (two-way) are the keys on the right. Check items and use the arrow buttons to move them; each side can be searched.

Inputs

Name

Type

Default

class

ClassValueExtra classes, merged into the component's own rather than replacing them.

''

items

XuiTransferItem[]Every item, on both sides. Which side each one is on comes from the bound value, not from this list.

[]

values

two-way

string[]The target-list keys. Two-way bindable with [(values)], or via formControl/ngModel.

[]

titles

[string, string]Headings for the two lists, source first.

['Source', 'Target']

searchable

booleanAdd a filter field above each list.

false

disabled

booleanBlock interaction and dim both lists.

false

Source

libs/ui/transfer/xui