Transfer

Move items from one list to another. Commonly used in scenarios like permission assignment, role binding, etc.

Basic Usage

List 15 items

• Illinois
• Maryland
• Florida
• Colorado
• Connecticut

List 22 items

• California
• Texas

Basic Usage

Searchable

List 17 items

• California
• Illinois
• Maryland
• Texas
• Florida
• Colorado
• Connecticut

List 20 items

No data

Searchable

Custom Labels and Footers

Source3 items

• Option 1
• Option 2
• Option 3

Source Footer

Target0 items

No data

Target Footer

Custom Labels

Field Mapping Alias

List 13 items

• R&D Dept
• HR Dept
• Finance Dept

List 21 items

• Marketing Dept

Field Mapping

Customizing Content

List 17 items

• 1 - California
• 2 - Illinois
• 3 - Maryland
• 4 - Texas
• 5 - Florida
• 6 - Colorado
• 7 - Connecticut

List 20 items

No data

List 17 items

• California
• Illinois
• Maryland
• Texas
• Florida
• Colorado
• Connecticut

List 20 items

No data

Content Customization

Virtual Scrolling

List 12000 items

• Option 0
• Option 1
• Option 2
• Option 3
• Option 4
• Option 5
• Option 6
• Option 7
• Option 8
• Option 9
• Option 10
• Option 11
• Option 12
• Option 13
• Option 14
• Option 15

List 20 items

No data

Virtual Scrolling

Customizing Action Buttons

List 13 items

• Item A
• Item B
• Item C

List 20 items

No data

Custom Buttons

Usage in Nuxt

The Transfer component fully supports Nuxt 3/4 environments. During Server-Side Rendering (SSR), both panels are pre-rendered with basic HTML to ensure visibility upon first load without hydration flickering.

List 12 items

• Nuxt 2
• Nuxt 4

List 21 items

• Nuxt 3

Nuxt Usage

SSR Considerations:

• ✅ Initial checked states (modelValue) render correctly into the right panel on the server.
• ✅ Item labels and disabled statuses support SSR.
• ✅ Virtual scrolling displays initial nodes on the first load.
• ⚠️ Button interactions, listing searches, and selection toggles activate after client-side hydration.
• 💡 Tooltips or dropdowns are handled via Teleport and don't affect the main HTML structure.

Performance

For huge datasets, the Transfer component uses optimized templates. Even without virtual enabled, the generated HTML structure is kept lean for optimal SSR performance.

API

Props

Name	Description	Type	Default
model-value / v-model	Binding value	TransferKey[]	[]
data	Data source	TransferData[]	[]
filterable	Whether list is searchable	boolean	false
filter-placeholder	Search input placeholder	string	'Please enter keyword'
filter-method	Custom search method	(query, item) => boolean	—
target-order	Order strategy for the right panel	'original' | 'push' | 'unshift'	'original'
titles	Panel titles	[string, string]	['List 1', 'List 2']
button-texts	Button labels	[string, string]	[]
render-content	Custom render function for content	(h, option) => VNode	—
props	Alias config for data source fields	TransferPropsAlias	—
left-default-checked	Default items checked on the left	TransferKey[]	[]
right-default-checked	Default items checked on the right	TransferKey[]	[]
virtual	Enable virtual scrolling	boolean	false
height	List height (px)	number	280
item-height	Row height (for virtual scrolling)	number	40
empty-text	Text for empty states	string	'No Data'
show-all-checkbox	Whether to show the "select all" checkbox	boolean	true
left-title	Title for the left panel	string	—
right-title	Title for the right panel	string	—
disabled	Whether disabled	boolean	false

Events

Name	Description	Parameters
change	Triggers when the right list changes	(value, direction, movedKeys)
left-check-change	Triggers when left selection changes	(value, movedKeys)
right-check-change	Triggers when right selection changes	(value, movedKeys)

Slots

Name	Description	Parameters
default	Custom content for data items	{ option }
left-header	Left header content	—
right-header	Right header content	—
left-footer	Left footer content	—
right-footer	Right footer content	—
left-empty	Left empty state content	—
right-empty	Right empty state content	—
buttons	Custom action buttons area	{ moveToLeft, moveToRight, leftChecked, rightChecked }

Expose

Name	Description	Type
clearLeftChecked	Clears left selections	() => void
clearRightChecked	Clears right selections	() => void
leftPanel	Left panel instance	TransferPanelExpose
rightPanel	Right panel instance	TransferPanelExpose

Theme Variables

Variable Name	Default	Description
--yh-transfer-panel-width	200px	Panel width
--yh-transfer-panel-height	300px	Panel height
--yh-transfer-header-height	40px	Header height
--yh-transfer-header-bg	#f5f7fa	Header background
--yh-transfer-item-height	32px	Row height
--yh-transfer-border-color	#ebeef5	Border color