From e86161568affa4fb71d36f75ad5b8045cdbef699 Mon Sep 17 00:00:00 2001
From: saller <weskerli@163.com>
Date: Sat, 19 Mar 2022 17:51:35 +0800
Subject: [PATCH] feat(comp:transfer): add transfer component (#794)

* add private component CheckableList

fix #782
---
 .../__snapshots__/checkableList.spec.ts.snap  |  108 +
 .../checkableListItem.spec.ts.snap            |    7 +
 .../__tests__/checkableList.spec.ts           |  100 +
 .../__tests__/checkableListItem.spec.ts       |  120 +
 .../_private/checkable-list/index.ts          |   22 +
 .../checkable-list/src/CheckableList.tsx      |  123 +
 .../checkable-list/src/CheckableListItem.tsx  |   71 +
 .../_private/checkable-list/src/token.ts      |   14 +
 .../_private/checkable-list/src/types.ts      |   71 +
 .../_private/checkable-list/style/index.less  |   57 +
 .../checkable-list/style/themes/default.less  |    4 +
 .../checkable-list/style/themes/default.ts    |    6 +
 .../style/themes/default.variable.less        |   15 +
 .../components/config/src/defaultConfig.ts    |    6 +
 packages/components/config/src/types.ts       |    9 +
 packages/components/default.less              |    2 +
 packages/components/icon/demo/all.ts          |    2 +
 packages/components/icon/src/definitions.ts   |   12 +-
 packages/components/icon/src/dependencies.ts  |   10 +-
 packages/components/index.ts                  |    2 +
 .../components/locales/src/langs/en-US.ts     |    5 +
 .../components/locales/src/langs/zh-CN.ts     |    5 +
 packages/components/locales/src/types.ts      |    7 +
 .../components/style/variable/prefix.less     |    2 +
 .../__snapshots__/transfer.spec.ts.snap       |  169 +
 .../__snapshots__/transferSlots.spec.ts.snap  | 4346 +++++++++++++++++
 .../transfer/__tests__/transfer.spec.ts       |  432 ++
 .../transfer/__tests__/transferSlots.spec.ts  |  236 +
 packages/components/transfer/demo/Basic.md    |   14 +
 packages/components/transfer/demo/Basic.vue   |   30 +
 .../transfer/demo/CustomHeaderFooter.md       |   14 +
 .../transfer/demo/CustomHeaderFooter.vue      |   36 +
 .../components/transfer/demo/CustomLabel.md   |   14 +
 .../components/transfer/demo/CustomLabel.vue  |   31 +
 .../transfer/demo/CustomListBody.md           |   14 +
 .../transfer/demo/CustomListBody.vue          |   92 +
 .../transfer/demo/CustomOperations.md         |   14 +
 .../transfer/demo/CustomOperations.vue        |   82 +
 .../components/transfer/demo/NoOperations.md  |   14 +
 .../components/transfer/demo/NoOperations.vue |   30 +
 .../components/transfer/demo/Pagination.md    |   14 +
 .../components/transfer/demo/Pagination.vue   |   34 +
 packages/components/transfer/demo/Remote.md   |   14 +
 packages/components/transfer/demo/Remote.vue  |   76 +
 .../components/transfer/demo/Searchable.md    |   14 +
 .../components/transfer/demo/Searchable.vue   |   26 +
 .../components/transfer/demo/VirtualScroll.md |   14 +
 .../transfer/demo/VirtualScroll.vue           |   49 +
 .../components/transfer/docs/Design.en.md     |    3 +
 .../components/transfer/docs/Design.zh.md     |    3 +
 packages/components/transfer/docs/Index.en.md |   29 +
 packages/components/transfer/docs/Index.zh.md |  178 +
 packages/components/transfer/index.ts         |   37 +
 packages/components/transfer/src/Transfer.tsx |  106 +
 .../transfer/src/TransferOperations.tsx       |   61 +
 .../transfer/src/composables/useGetRowKey.ts  |   36 +
 .../transfer/src/composables/usePagination.ts |   93 +
 .../transfer/src/composables/useSearchable.ts |   32 +
 .../src/composables/useTransferBindings.ts    |  122 +
 .../src/composables/useTransferData.ts        |  192 +
 .../composables/useTransferDataStrategies.ts  |  106 +
 .../src/composables/useTransferOperations.ts  |   97 +
 .../src/composables/useTransferSelectState.ts |  230 +
 .../transfer/src/list/TransferList.tsx        |   79 +
 .../transfer/src/list/TransferListBody.tsx    |  108 +
 .../transfer/src/list/TransferListFooter.tsx  |   59 +
 .../transfer/src/list/TransferListHeader.tsx  |  167 +
 packages/components/transfer/src/token.ts     |   35 +
 packages/components/transfer/src/types.ts     |  181 +
 packages/components/transfer/src/utils.ts     |   21 +
 packages/components/transfer/style/index.less |   34 +
 packages/components/transfer/style/list.less  |  118 +
 .../transfer/style/themes/default.less        |    4 +
 .../transfer/style/themes/default.ts          |   11 +
 .../style/themes/default.variable.less        |   30 +
 packages/components/types.d.ts                |    2 +
 scripts/gulp/icons/assets/clear.svg           |    2 +-
 scripts/gulp/icons/assets/left-double.svg     |    1 +
 scripts/gulp/icons/assets/right-double.svg    |    1 +
 79 files changed, 8763 insertions(+), 4 deletions(-)
 create mode 100644 packages/components/_private/checkable-list/__tests__/__snapshots__/checkableList.spec.ts.snap
 create mode 100644 packages/components/_private/checkable-list/__tests__/__snapshots__/checkableListItem.spec.ts.snap
 create mode 100644 packages/components/_private/checkable-list/__tests__/checkableList.spec.ts
 create mode 100644 packages/components/_private/checkable-list/__tests__/checkableListItem.spec.ts
 create mode 100644 packages/components/_private/checkable-list/index.ts
 create mode 100644 packages/components/_private/checkable-list/src/CheckableList.tsx
 create mode 100644 packages/components/_private/checkable-list/src/CheckableListItem.tsx
 create mode 100644 packages/components/_private/checkable-list/src/token.ts
 create mode 100644 packages/components/_private/checkable-list/src/types.ts
 create mode 100644 packages/components/_private/checkable-list/style/index.less
 create mode 100644 packages/components/_private/checkable-list/style/themes/default.less
 create mode 100644 packages/components/_private/checkable-list/style/themes/default.ts
 create mode 100644 packages/components/_private/checkable-list/style/themes/default.variable.less
 create mode 100644 packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap
 create mode 100644 packages/components/transfer/__tests__/__snapshots__/transferSlots.spec.ts.snap
 create mode 100644 packages/components/transfer/__tests__/transfer.spec.ts
 create mode 100644 packages/components/transfer/__tests__/transferSlots.spec.ts
 create mode 100644 packages/components/transfer/demo/Basic.md
 create mode 100644 packages/components/transfer/demo/Basic.vue
 create mode 100644 packages/components/transfer/demo/CustomHeaderFooter.md
 create mode 100644 packages/components/transfer/demo/CustomHeaderFooter.vue
 create mode 100644 packages/components/transfer/demo/CustomLabel.md
 create mode 100644 packages/components/transfer/demo/CustomLabel.vue
 create mode 100644 packages/components/transfer/demo/CustomListBody.md
 create mode 100644 packages/components/transfer/demo/CustomListBody.vue
 create mode 100644 packages/components/transfer/demo/CustomOperations.md
 create mode 100644 packages/components/transfer/demo/CustomOperations.vue
 create mode 100644 packages/components/transfer/demo/NoOperations.md
 create mode 100644 packages/components/transfer/demo/NoOperations.vue
 create mode 100644 packages/components/transfer/demo/Pagination.md
 create mode 100644 packages/components/transfer/demo/Pagination.vue
 create mode 100644 packages/components/transfer/demo/Remote.md
 create mode 100644 packages/components/transfer/demo/Remote.vue
 create mode 100644 packages/components/transfer/demo/Searchable.md
 create mode 100644 packages/components/transfer/demo/Searchable.vue
 create mode 100644 packages/components/transfer/demo/VirtualScroll.md
 create mode 100644 packages/components/transfer/demo/VirtualScroll.vue
 create mode 100644 packages/components/transfer/docs/Design.en.md
 create mode 100644 packages/components/transfer/docs/Design.zh.md
 create mode 100644 packages/components/transfer/docs/Index.en.md
 create mode 100644 packages/components/transfer/docs/Index.zh.md
 create mode 100644 packages/components/transfer/index.ts
 create mode 100644 packages/components/transfer/src/Transfer.tsx
 create mode 100644 packages/components/transfer/src/TransferOperations.tsx
 create mode 100644 packages/components/transfer/src/composables/useGetRowKey.ts
 create mode 100644 packages/components/transfer/src/composables/usePagination.ts
 create mode 100644 packages/components/transfer/src/composables/useSearchable.ts
 create mode 100644 packages/components/transfer/src/composables/useTransferBindings.ts
 create mode 100644 packages/components/transfer/src/composables/useTransferData.ts
 create mode 100644 packages/components/transfer/src/composables/useTransferDataStrategies.ts
 create mode 100644 packages/components/transfer/src/composables/useTransferOperations.ts
 create mode 100644 packages/components/transfer/src/composables/useTransferSelectState.ts
 create mode 100644 packages/components/transfer/src/list/TransferList.tsx
 create mode 100644 packages/components/transfer/src/list/TransferListBody.tsx
 create mode 100644 packages/components/transfer/src/list/TransferListFooter.tsx
 create mode 100644 packages/components/transfer/src/list/TransferListHeader.tsx
 create mode 100644 packages/components/transfer/src/token.ts
 create mode 100644 packages/components/transfer/src/types.ts
 create mode 100644 packages/components/transfer/src/utils.ts
 create mode 100644 packages/components/transfer/style/index.less
 create mode 100644 packages/components/transfer/style/list.less
 create mode 100644 packages/components/transfer/style/themes/default.less
 create mode 100644 packages/components/transfer/style/themes/default.ts
 create mode 100644 packages/components/transfer/style/themes/default.variable.less
 create mode 100644 scripts/gulp/icons/assets/left-double.svg
 create mode 100644 scripts/gulp/icons/assets/right-double.svg

diff --git a/packages/components/_private/checkable-list/__tests__/__snapshots__/checkableList.spec.ts.snap b/packages/components/_private/checkable-list/__tests__/__snapshots__/checkableList.spec.ts.snap
new file mode 100644
index 000000000..936c5bc38
--- /dev/null
+++ b/packages/components/_private/checkable-list/__tests__/__snapshots__/checkableList.spec.ts.snap
@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckableList render work 1`] = `
+"<div class=\\"ix-checkable-list\\">
+  <ul class=\\"ix-checkable-list-inner\\">
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"0\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-0</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"1\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-1</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"2\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-2</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"3\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-3</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"4\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-4</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"5\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-5</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"6\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-6</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"7\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-7</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"8\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-8</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"9\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-9</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"10\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-10</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"11\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-11</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"12\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-12</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"13\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-13</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"14\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-14</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"15\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-15</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"16\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-16</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"17\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-17</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"18\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-18</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+    <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"19\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-19</span>
+        <!---->
+      </label>
+      <!---->
+    </li>
+  </ul>
+</div>"
+`;
diff --git a/packages/components/_private/checkable-list/__tests__/__snapshots__/checkableListItem.spec.ts.snap b/packages/components/_private/checkable-list/__tests__/__snapshots__/checkableListItem.spec.ts.snap
new file mode 100644
index 000000000..1b6e6c699
--- /dev/null
+++ b/packages/components/_private/checkable-list/__tests__/__snapshots__/checkableListItem.spec.ts.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckableListItem render work 1`] = `
+"<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"1\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-1</span>
+    <!---->
+  </label><i class=\\"ix-icon ix-icon-close ix-checkable-list-item-close-icon\\" role=\\"img\\" aria-label=\\"close\\"></i></li>"
+`;
diff --git a/packages/components/_private/checkable-list/__tests__/checkableList.spec.ts b/packages/components/_private/checkable-list/__tests__/checkableList.spec.ts
new file mode 100644
index 000000000..bd41bf03a
--- /dev/null
+++ b/packages/components/_private/checkable-list/__tests__/checkableList.spec.ts
@@ -0,0 +1,100 @@
+import { MountingOptions, mount } from '@vue/test-utils'
+
+import { renderWork } from '@tests'
+
+import { CdkVirtualScroll } from '@idux/cdk/scroll'
+import { IxCheckbox } from '@idux/components/checkbox'
+
+import CheckableList from '../src/CheckableList'
+import CheckableListItem from '../src/CheckableListItem'
+import { CheckableListProps } from '../src/types'
+
+const mockedDataSource = Array.from(new Array(20)).map((_, idx) => ({
+  key: idx,
+  label: `Option-${idx}`,
+}))
+
+describe('CheckableList', () => {
+  const CheckableListMount = (options?: MountingOptions<Partial<CheckableListProps>>) =>
+    mount(CheckableList, { ...(options as MountingOptions<CheckableListProps>) })
+
+  renderWork<CheckableListProps>(CheckableList, {
+    props: { dataSource: mockedDataSource },
+  })
+
+  test('checked work', async () => {
+    const wrapper = CheckableListMount({
+      props: { dataSource: mockedDataSource, checked: item => [1, 2, 3, 4].includes(item.key as number) },
+    })
+
+    expect(
+      wrapper
+        .findAllComponents(CheckableListItem)
+        .filter(item => [1, 2, 3, 4].includes(item.props().value))
+        .every(item => item.props().checked === true),
+    ).toBeTruthy()
+    expect(
+      wrapper
+        .findAllComponents(CheckableListItem)
+        .filter(item => ![1, 2, 3, 4].includes(item.props().value))
+        .every(item => item.props().checked === false),
+    ).toBeTruthy()
+  })
+
+  test('disabled work', async () => {
+    const wrapper = CheckableListMount({
+      props: { dataSource: mockedDataSource, disabled: item => [1, 2, 3, 4].includes(item.key as number) },
+    })
+
+    expect(
+      wrapper
+        .findAllComponents(CheckableListItem)
+        .filter(item => [1, 2, 3, 4].includes(item.props().value))
+        .every(item => item.props().disabled === true),
+    ).toBeTruthy()
+    expect(
+      wrapper
+        .findAllComponents(CheckableListItem)
+        .filter(item => ![1, 2, 3, 4].includes(item.props().value))
+        .every(item => item.props().disabled === false),
+    ).toBeTruthy()
+  })
+
+  test('virtual work', async () => {
+    const wrapper = CheckableListMount({
+      props: { dataSource: mockedDataSource, virtual: true, scroll: { height: 100, fullHeight: true } },
+    })
+
+    expect(wrapper.classes()).toContain('ix-checkable-list-virtual')
+    expect(wrapper.findComponent(CdkVirtualScroll).exists()).toBeTruthy()
+  })
+
+  test('onCheckChange work', async () => {
+    const onCheckChange = jest.fn()
+    const wrapper = CheckableListMount({
+      props: { dataSource: mockedDataSource, onCheckChange, checkable: true },
+    })
+
+    await wrapper
+      .findAllComponents(CheckableListItem)
+      .find(item => item.props().value === 3)
+      ?.findComponent(IxCheckbox)
+      .find('input')
+      .setValue(true)
+    expect(onCheckChange).toBeCalledWith({ key: 3, label: 'Option-3' }, true)
+  })
+
+  test('onRemove work', async () => {
+    const onRemove = jest.fn()
+    const wrapper = CheckableListMount({
+      props: { dataSource: mockedDataSource, onRemove, removable: true },
+    })
+
+    await wrapper
+      .findAllComponents(CheckableListItem)
+      .find(item => item.props().value === 3)
+      ?.find('.ix-checkable-list-item-close-icon')
+      .trigger('click')
+    expect(onRemove).toBeCalledWith({ key: 3, label: 'Option-3' })
+  })
+})
diff --git a/packages/components/_private/checkable-list/__tests__/checkableListItem.spec.ts b/packages/components/_private/checkable-list/__tests__/checkableListItem.spec.ts
new file mode 100644
index 000000000..097193fed
--- /dev/null
+++ b/packages/components/_private/checkable-list/__tests__/checkableListItem.spec.ts
@@ -0,0 +1,120 @@
+import { MountingOptions, mount } from '@vue/test-utils'
+import { computed, h } from 'vue'
+
+import { renderWork } from '@tests'
+
+import { IxCheckbox } from '@idux/components/checkbox'
+
+import CheckableListItem from '../src/CheckableListItem'
+import { checkableListContext } from '../src/token'
+import { CheckableListItemProps } from '../src/types'
+
+const mountGlobalOpts = {
+  provide: {
+    [checkableListContext as symbol]: {
+      mergedPrefixCls: computed(() => 'ix-checkable-list'),
+    },
+  },
+}
+
+describe('CheckableListItem', () => {
+  const CheckableListItemMount = (options?: MountingOptions<Partial<CheckableListItemProps>>) =>
+    mount(CheckableListItem, { ...(options as MountingOptions<CheckableListItemProps>), global: mountGlobalOpts })
+
+  renderWork<CheckableListItemProps>(CheckableListItem, {
+    props: {
+      value: '1',
+      label: 'Option-1',
+      checkable: true,
+      removable: true,
+      disabled: false,
+    },
+    global: mountGlobalOpts,
+  })
+
+  test('checkable work', async () => {
+    const wrapper = CheckableListItemMount({
+      props: {
+        value: '1',
+        label: 'Option-1',
+        checked: true,
+        checkable: true,
+        removable: true,
+        disabled: false,
+      },
+    })
+
+    const checkboxComp = wrapper.findComponent(IxCheckbox)
+    expect(checkboxComp.exists()).toBeTruthy()
+    expect(checkboxComp.vm.checked).toBe(true)
+
+    await wrapper.setProps({ checkable: false })
+    expect(wrapper.findComponent(IxCheckbox).exists()).toBeFalsy()
+  })
+
+  test('removable work', async () => {
+    const onRemove = jest.fn()
+    const wrapper = CheckableListItemMount({
+      props: {
+        value: '1',
+        label: 'Option-1',
+        checkable: true,
+        removable: true,
+        disabled: false,
+        onRemove,
+      },
+    })
+
+    const removeTrigger = wrapper.find('.ix-checkable-list-item-close-icon')
+    expect(removeTrigger.exists()).toBeTruthy()
+    await removeTrigger.trigger('click')
+    expect(onRemove).toBeCalled()
+
+    await wrapper.setProps({ removable: false })
+    expect(wrapper.find('.ix-checkable-list-item-close-icon').exists()).toBeFalsy()
+  })
+
+  test('disabled work', async () => {
+    const onCheckChange = jest.fn()
+    const wrapper = CheckableListItemMount({
+      props: {
+        value: '1',
+        label: 'Option-1',
+        checkable: true,
+        removable: true,
+        disabled: true,
+        onCheckChange,
+      },
+    })
+
+    expect(wrapper.classes()).toContain('ix-checkable-list-item-disabled')
+    expect(wrapper.find('.ix-checkable-list-item-close-icon').exists()).toBeFalsy()
+    await wrapper.findComponent(IxCheckbox).find('input').setValue(true)
+    expect(onCheckChange).not.toBeCalled()
+
+    await wrapper.findComponent(IxCheckbox).find('input').setValue(false)
+
+    await wrapper.setProps({ disabled: false })
+    expect(wrapper.classes()).not.toContain('ix-checkable-list-item-disabled')
+    expect(wrapper.find('.ix-checkable-list-item-close-icon').exists()).toBeTruthy()
+    await wrapper.findComponent(IxCheckbox).find('input').setValue(true)
+    expect(onCheckChange).toBeCalledWith(true)
+  })
+
+  test('slot work', async () => {
+    const wrapper = CheckableListItemMount({
+      props: {
+        value: '1',
+        label: 'Option-1',
+        checkable: true,
+        removable: true,
+        disabled: true,
+      },
+      slots: {
+        default: () => h('span', { class: 'custom-label-slot' }),
+      },
+    })
+
+    expect(wrapper.find('.custom-label-slot').exists()).toBeTruthy()
+  })
+})
diff --git a/packages/components/_private/checkable-list/index.ts b/packages/components/_private/checkable-list/index.ts
new file mode 100644
index 000000000..7f5481003
--- /dev/null
+++ b/packages/components/_private/checkable-list/index.ts
@@ -0,0 +1,22 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { CheckableListComponent } from './src/types'
+
+import CheckableList from './src/CheckableList'
+
+const ɵCheckableList = CheckableList as unknown as CheckableListComponent
+
+export { ɵCheckableList }
+
+export type {
+  CheckableListData as ɵCheckableListData,
+  CheckableListScroll as ɵCheckableListScroll,
+  CheckableListInstance as ɵCheckableListInstance,
+  CheckableListComponent as ɵCheckableListComponent,
+  CheckableListPublicProps as ɵCheckableListProps,
+} from './src/types'
diff --git a/packages/components/_private/checkable-list/src/CheckableList.tsx b/packages/components/_private/checkable-list/src/CheckableList.tsx
new file mode 100644
index 000000000..10ae1bc24
--- /dev/null
+++ b/packages/components/_private/checkable-list/src/CheckableList.tsx
@@ -0,0 +1,123 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { VirtualScrollInstance } from '@idux/cdk/scroll'
+
+import { computed, defineComponent, normalizeClass, provide, ref } from 'vue'
+
+import { CdkVirtualScroll } from '@idux/cdk/scroll'
+import { VKey, callEmit } from '@idux/cdk/utils'
+import { useGlobalConfig } from '@idux/components/config'
+
+import CheckableListItem from './CheckableListItem'
+import { checkableListContext } from './token'
+import { type CheckableListApi, type CheckableListData, checkableListProps } from './types'
+
+export default defineComponent({
+  name: 'IxCheckableList',
+  props: checkableListProps,
+  setup(props, { slots, expose }) {
+    const common = useGlobalConfig('common')
+    const mergedPrefixCls = computed(() => `${common.prefixCls}-checkable-list`)
+    const virtualScrollRef = ref<VirtualScrollInstance>()
+
+    provide(checkableListContext, {
+      mergedPrefixCls,
+    })
+
+    const checkableListApi: CheckableListApi = {
+      scrollTo: (...params) => virtualScrollRef.value?.scrollTo(...params),
+    }
+
+    expose(checkableListApi)
+
+    const getRowKey = (item: CheckableListData) => (props.getRowKey?.(item) ?? item.key)!
+
+    const handleScroll = (evt: Event) => {
+      callEmit(props.onScroll, evt)
+    }
+    const handleScrolledBottom = () => {
+      callEmit(props.onScrolledBottom)
+    }
+    const handleScrolledChange = (startIndex: number, endIndex: number, visibleData: unknown[]) => {
+      callEmit(props.onScrolledChange, startIndex, endIndex, visibleData)
+    }
+
+    const renderListItem = (item: CheckableListData) => {
+      const key = getRowKey(item)
+      const onCheckChange = (checked: boolean) => {
+        callEmit(props.onCheckChange, item, checked)
+      }
+      const onRemove = () => {
+        callEmit(props.onRemove, item)
+      }
+
+      return (
+        <CheckableListItem
+          key={key}
+          value={key!}
+          label={item.label}
+          checked={!!props.checked?.(item)}
+          disabled={!!props.disabled?.(item)}
+          checkable={props.checkable}
+          removable={props.removable}
+          v-slots={{ default: slots.label && (() => slots.label?.(item)) }}
+          onCheckChange={onCheckChange}
+          onRemove={onRemove}
+          {...(item.additional ?? {})}
+        />
+      )
+    }
+
+    const renderBody = () => {
+      const { dataSource, virtual, scroll } = props
+      const data = dataSource ?? []
+
+      if (data.length <= 0) {
+        return
+      }
+
+      if (virtual && scroll) {
+        const { height, fullHeight } = scroll
+        return (
+          <CdkVirtualScroll
+            ref={virtualScrollRef}
+            dataSource={data}
+            fullHeight={fullHeight}
+            height={height as number}
+            itemHeight={32}
+            itemKey={getRowKey as (item: unknown) => VKey}
+            itemRender={({ item }) => renderListItem(item)}
+            virtual
+            onScroll={handleScroll}
+            onScrolledBottom={handleScrolledBottom}
+            onScrolledChange={handleScrolledChange}
+          />
+        )
+      }
+
+      return (
+        <ul class={`${mergedPrefixCls.value}-inner`} onScroll={handleScroll}>
+          {data.map(item => renderListItem(item))}
+        </ul>
+      )
+    }
+
+    const classes = computed(() => {
+      const prefixCls = mergedPrefixCls.value
+
+      return normalizeClass({
+        [prefixCls]: true,
+        [`${prefixCls}-virtual`]: !!props.virtual,
+      })
+    })
+
+    return () => {
+      return <div class={classes.value}>{renderBody()}</div>
+    }
+  },
+})
diff --git a/packages/components/_private/checkable-list/src/CheckableListItem.tsx b/packages/components/_private/checkable-list/src/CheckableListItem.tsx
new file mode 100644
index 000000000..b808fc2be
--- /dev/null
+++ b/packages/components/_private/checkable-list/src/CheckableListItem.tsx
@@ -0,0 +1,71 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import { computed, defineComponent, inject, normalizeClass } from 'vue'
+
+import { callEmit } from '@idux/cdk/utils'
+import { IxCheckbox } from '@idux/components/checkbox'
+import { IxIcon } from '@idux/components/icon'
+
+import { checkableListContext } from './token'
+import { checkableListItemProps } from './types'
+
+export default defineComponent({
+  props: checkableListItemProps,
+  setup(props, { slots }) {
+    const { mergedPrefixCls } = inject(checkableListContext)!
+
+    const onCheckChange = (value: number | boolean | string) => {
+      callEmit(props.onCheckChange, !!value)
+    }
+    const onRemove = () => {
+      callEmit(props.onRemove)
+    }
+
+    const renderLabel = (prefixCls: string) => {
+      const { checked, value, disabled, checkable } = props
+
+      if (checkable) {
+        return (
+          <IxCheckbox
+            class={`${prefixCls}-checkbox`}
+            v-slots={slots}
+            label={props.label}
+            value={value}
+            checked={checked}
+            disabled={disabled}
+            onChange={onCheckChange}
+          />
+        )
+      }
+
+      return <label class={`${prefixCls}-label`}>{slots.default?.() ?? props.label}</label>
+    }
+
+    const classes = computed(() => {
+      const prefixCls = `${mergedPrefixCls.value}-item`
+
+      return normalizeClass({
+        [prefixCls]: true,
+        [`${prefixCls}-disabled`]: props.disabled,
+      })
+    })
+
+    return () => {
+      const prefixCls = `${mergedPrefixCls.value}-item`
+
+      return (
+        <li class={classes.value}>
+          {renderLabel(prefixCls)}
+          {props.removable && !props.disabled && (
+            <IxIcon class={`${prefixCls}-close-icon`} name="close" onClick={onRemove} />
+          )}
+        </li>
+      )
+    }
+  },
+})
diff --git a/packages/components/_private/checkable-list/src/token.ts b/packages/components/_private/checkable-list/src/token.ts
new file mode 100644
index 000000000..4959dcede
--- /dev/null
+++ b/packages/components/_private/checkable-list/src/token.ts
@@ -0,0 +1,14 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export interface CheckableListContext {
+  mergedPrefixCls: ComputedRef<string>
+}
+
+export const checkableListContext: InjectionKey<CheckableListContext> = Symbol('checkableListContext')
diff --git a/packages/components/_private/checkable-list/src/types.ts b/packages/components/_private/checkable-list/src/types.ts
new file mode 100644
index 000000000..ceae14e97
--- /dev/null
+++ b/packages/components/_private/checkable-list/src/types.ts
@@ -0,0 +1,71 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { VirtualScrollToFn } from '@idux/cdk/scroll'
+import type { ExtractInnerPropTypes, ExtractPublicPropTypes } from '@idux/cdk/utils'
+import type { DefineComponent, HTMLAttributes } from 'vue'
+
+import { IxPropTypes, type VKey } from '@idux/cdk/utils'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface CheckableListData extends Record<VKey, any> {
+  key?: VKey
+  label?: string
+  disabled?: boolean
+  additional?: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    class?: any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    style?: any
+    [key: string]: unknown
+  }
+}
+
+export interface CheckableListScroll {
+  height?: string | number
+  fullHeight?: boolean
+}
+
+export const checkableListProps = {
+  dataSource: IxPropTypes.array<CheckableListData>(),
+  checkable: IxPropTypes.bool.def(true),
+  removable: IxPropTypes.bool.def(false),
+  checked: IxPropTypes.func<(item: CheckableListData) => boolean>(),
+  disabled: IxPropTypes.func<(item: CheckableListData) => boolean>(),
+  getRowKey: IxPropTypes.func<(item: CheckableListData) => VKey>(),
+  virtual: IxPropTypes.bool,
+  scroll: IxPropTypes.object<CheckableListScroll>(),
+  onCheckChange: IxPropTypes.emit<(item: CheckableListData, checked: boolean) => void>(),
+  onRemove: IxPropTypes.emit<(item: CheckableListData) => void>(),
+  onScroll: IxPropTypes.emit<(evt: Event) => void>(),
+  onScrolledChange: IxPropTypes.emit<(startIndex: number, endIndex: number, visibleData: unknown[]) => void>(),
+  onScrolledBottom: IxPropTypes.emit<() => void>(),
+}
+
+export const checkableListItemProps = {
+  checked: IxPropTypes.bool.def(false),
+  checkable: IxPropTypes.bool.def(true),
+  removable: IxPropTypes.bool.def(false),
+  disabled: IxPropTypes.bool.def(false),
+  label: IxPropTypes.string,
+  value: IxPropTypes.oneOfType([String, Number, Symbol]).isRequired,
+  onCheckChange: IxPropTypes.emit<(checked: boolean) => void>(),
+  onRemove: IxPropTypes.emit<() => void>(),
+}
+
+export interface CheckableListApi {
+  scrollTo: VirtualScrollToFn
+}
+
+export type CheckableListProps = ExtractInnerPropTypes<typeof checkableListProps>
+export type CheckableListItemProps = ExtractInnerPropTypes<typeof checkableListItemProps>
+export type CheckableListPublicProps = ExtractPublicPropTypes<typeof checkableListProps>
+export type CheckableListComponent = DefineComponent<
+  Omit<HTMLAttributes, keyof CheckableListPublicProps> & CheckableListPublicProps,
+  CheckableListApi
+>
+export type CheckableListInstance = InstanceType<DefineComponent<CheckableListProps, CheckableListApi>>
diff --git a/packages/components/_private/checkable-list/style/index.less b/packages/components/_private/checkable-list/style/index.less
new file mode 100644
index 000000000..886207e5f
--- /dev/null
+++ b/packages/components/_private/checkable-list/style/index.less
@@ -0,0 +1,57 @@
+@import '../../../style/mixins/reset.less';
+
+.@{checkable-list-prefix} {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  .reset-scroll();
+  
+  &.@{checkable-list-prefix}-virtual {
+    height: auto;
+  }
+
+  &-inner {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    flex-shrink: 0;
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: @checkable-list-item-min-height;
+    padding: @checkable-list-item-padding;
+    line-height: @checkable-list-item-line-height;
+    font-size: @checkable-list-item-font-size;
+
+    &-disabled {
+      color: @checkable-list-disabled-color;
+      cursor: not-allowed;
+    }
+    &-disabled &-label {
+      cursor: not-allowed;
+    }
+
+    &-checkbox {
+      flex: auto;
+    }
+
+    &-close-icon {
+      margin-left: auto;
+      font-size: @checkable-list-close-icon-font-size;
+      color: @checkable-list-close-icon-color;
+      &:hover {
+        color: @checkable-list-close-icon-hover-color;
+      }
+      &:focus,
+      &:active {
+        color: @checkable-list-close-icon-active-color;
+      }
+
+      cursor: pointer;
+    }
+  }
+}
diff --git a/packages/components/_private/checkable-list/style/themes/default.less b/packages/components/_private/checkable-list/style/themes/default.less
new file mode 100644
index 000000000..2e9d4d3d3
--- /dev/null
+++ b/packages/components/_private/checkable-list/style/themes/default.less
@@ -0,0 +1,4 @@
+@import '../../../../style/themes/default.less';
+@import '../../../../form/style/themes/default.variable.less';
+@import '../index.less';
+@import './default.variable.less';
diff --git a/packages/components/_private/checkable-list/style/themes/default.ts b/packages/components/_private/checkable-list/style/themes/default.ts
new file mode 100644
index 000000000..3ea95c037
--- /dev/null
+++ b/packages/components/_private/checkable-list/style/themes/default.ts
@@ -0,0 +1,6 @@
+// style dependencies
+import '@idux/components/style/core/default'
+import '@idux/components/checkbox/style/themes/default'
+import '@idux/components/icon/style/themes/default'
+
+import './default.less'
diff --git a/packages/components/_private/checkable-list/style/themes/default.variable.less b/packages/components/_private/checkable-list/style/themes/default.variable.less
new file mode 100644
index 000000000..489da5c67
--- /dev/null
+++ b/packages/components/_private/checkable-list/style/themes/default.variable.less
@@ -0,0 +1,15 @@
+@import '../../../../style/themes/default.less';
+
+@checkable-list-color: @text-color;
+@checkable-list-disabled-color: @text-color-disabled;
+
+@checkable-list-item-font-size: @font-size-md;
+@checkable-list-item-min-height: @height-md;
+@checkable-list-item-padding: 0 @spacing-md;
+@checkable-list-item-line-height: @line-height-base;
+
+@checkable-list-clear-icon-font-size: @font-size-md;
+@checkable-list-close-icon-font-size: @font-size-md;
+@checkable-list-close-icon-color: @color-graphite-d20;
+@checkable-list-close-icon-hover-color: @color-primary;
+@checkable-list-close-icon-active-color: @color-primary;
\ No newline at end of file
diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
index d5578e0c0..4d2789d1b 100644
--- a/packages/components/config/src/defaultConfig.ts
+++ b/packages/components/config/src/defaultConfig.ts
@@ -296,6 +296,12 @@ export const defaultConfig: GlobalConfig = {
     allowInput: true,
     format: 'HH:mm:ss',
   },
+  transfer: {
+    getKey: 'key',
+    clearable: true,
+    clearIcon: 'clear',
+    showSelectAll: true,
+  },
   tooltip: {
     autoAdjust: true,
     delay: 100,
diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
index ed2bda6c5..0fd924117 100644
--- a/packages/components/config/src/types.ts
+++ b/packages/components/config/src/types.ts
@@ -83,6 +83,7 @@ export interface GlobalConfig {
   textarea: TextareaConfig
   timePicker: TimePickerConfig
   timeRangePicker: TimeRangePickerConfig
+  transfer: TransferConfig
   tooltip: TooltipConfig
   tree: TreeConfig
   treeSelect: TreeSelectConfig
@@ -439,6 +440,14 @@ export interface TimePickerConfig {
 
 export type TimeRangePickerConfig = TimePickerConfig
 
+export interface TransferConfig {
+  getKey: string
+  searchable?: boolean | { source: boolean; target: boolean }
+  clearable: boolean
+  clearIcon: string
+  showSelectAll: boolean
+}
+
 export interface TooltipConfig {
   autoAdjust: boolean
   delay: number | [number | null, number | null]
diff --git a/packages/components/default.less b/packages/components/default.less
index 688b57f86..cd8dac3fd 100644
--- a/packages/components/default.less
+++ b/packages/components/default.less
@@ -1,5 +1,6 @@
 @import './style/core/default.less';
 
+@import './_private/checkable-list/style/themes/default.less';
 @import './_private/collapse-transition/style/themes/default.less';
 @import './_private/mask/style/themes/default.less';
 @import './_private/overlay/style/themes/default.less';
@@ -57,6 +58,7 @@
 @import './textarea/style/themes/default.less';
 @import './time-picker/style/themes/default.less';
 @import './timeline/style/themes/default.less';
+@import './transfer/style/themes/default.less';
 @import './tooltip/style/themes/default.less';
 @import './tree/style/themes/default.less';
 @import './tree-select/style/themes/default.less';
diff --git a/packages/components/icon/demo/all.ts b/packages/components/icon/demo/all.ts
index 12ade3939..b3394c641 100644
--- a/packages/components/icon/demo/all.ts
+++ b/packages/components/icon/demo/all.ts
@@ -106,6 +106,7 @@ export const allIcons = [
   'key',
   'layout',
   'left-circle',
+  'left-double',
   'left',
   'like-filled',
   'like',
@@ -153,6 +154,7 @@ export const allIcons = [
   'redo',
   'reload',
   'right-circle',
+  'right-double',
   'right',
   'ring-chart',
   'robot',
diff --git a/packages/components/icon/src/definitions.ts b/packages/components/icon/src/definitions.ts
index 9743f37ca..941f5c171 100644
--- a/packages/components/icon/src/definitions.ts
+++ b/packages/components/icon/src/definitions.ts
@@ -147,7 +147,7 @@ export const Check = {
 
 export const Clear = {
   name: 'clear',
-  svg: '<svg viewBox="64 64 896 896" focusable="false"><path d="M960 332.8v166.4a12.8 12.8 0 0 1-12.8 12.8H140.8a12.8 12.8 0 0 1-12.8-12.8V332.8c0-7.04 5.76-12.8 12.8-12.8h806.4c7.04 0 12.8 5.76 12.8 12.8zM896 384H192v64h704v-64z"/><path d="M627.2 64c7.04 0 12.8 5.76 12.8 12.8v294.4a12.8 12.8 0 0 1-12.8 12.8H460.8a12.8 12.8 0 0 1-12.8-12.8V76.8c0-7.04 5.76-12.8 12.8-12.8h166.4zM576 128h-64v192h64V128zm256 320 124.032 496.064A12.8 12.8 0 0 1 943.616 960H144.384a12.8 12.8 0 0 1-12.416-15.936L256 448h576zm-50.048 64H305.984l-96 384h667.968l-96-384z"/><path d="m389.504 663.744 61.824 16.512-68.096 256-61.824-16.512z"/></svg>',
+  svg: '<svg viewBox="64 64 896 896" focusable="false"><path d="M243.2 320c7.04 0 12.8 5.76 12.8 12.8V896h512V332.8c0-7.04 5.76-12.8 12.8-12.8h38.4c7.04 0 12.8 5.76 12.8 12.8v614.08a12.8 12.8 0 0 1-12.8 12.8H204.8a12.8 12.8 0 0 1-12.8-12.8V332.8c0-7.04 5.76-12.8 12.8-12.8h38.4zm512-256c7.04 0 12.8 5.76 12.8 12.8V192h179.2c7.04 0 12.8 5.76 12.8 12.8v38.4a12.8 12.8 0 0 1-12.8 12.8H76.8A12.8 12.8 0 0 1 64 243.2v-38.4c0-7.04 5.76-12.8 12.8-12.8H256V76.8c0-7.04 5.76-12.8 12.8-12.8h486.4zm-50.752 64h-383.68l-.128 64h383.68v-64z"/></svg>',
 }
 
 export const ClockCircle = {
@@ -540,6 +540,11 @@ export const LeftCircle = {
   svg: '<svg viewBox="64 64 896 896" focusable="false"><path d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 64a384 384 0 1 0 0 768 384 384 0 0 0 0-768z"/><path d="m329.472 504.768 264.32-264.32a12.8 12.8 0 0 1 18.112 0l27.136 27.136a12.8 12.8 0 0 1 0 18.112L419.968 504.832a12.8 12.8 0 0 0 0 18.112l215.296 215.232a12.8 12.8 0 0 1 0 18.112l-27.136 27.136a12.8 12.8 0 0 1-18.112 0L329.472 522.88a12.8 12.8 0 0 1 0-18.048z"/></svg>',
 }
 
+export const LeftDouble = {
+  name: 'left-double',
+  svg: '<svg viewBox="64 64 896 896" focusable="false"><path d="M533.504 265.344a32 32 0 0 1 0 45.312L342.336 501.76a12.8 12.8 0 0 0 0 18.112l192.512 192.512a32 32 0 0 1-45.248 45.248L265.344 533.504a32 32 0 0 1 0-45.248L488.32 265.344a32 32 0 0 1 45.248 0zm224 0a32 32 0 0 1 0 45.312L566.336 501.76a12.8 12.8 0 0 0 0 18.112l192.512 192.512a32 32 0 1 1-45.248 45.248L489.344 533.504a32 32 0 0 1 0-45.248l222.912-222.912a32 32 0 0 1 45.248 0z"/></svg>',
+}
+
 export const Left = {
   name: 'left',
   svg: '<svg viewBox="64 64 896 896" focusable="false"><path d="M362.432 534.016a29.888 29.888 0 0 1 0-45.376l247.424-223.232a38.336 38.336 0 0 1 50.24 0 29.888 29.888 0 0 1 0 45.312L447.808 502.272a11.968 11.968 0 0 0 0 18.112l213.76 192.896a29.888 29.888 0 0 1 0 45.312 38.336 38.336 0 0 1-50.24 0l-248.96-224.64z"/></svg>',
@@ -775,6 +780,11 @@ export const RightCircle = {
   svg: '<svg viewBox="64 64 896 896" focusable="false"><path d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 64a384 384 0 1 0 0 768 384 384 0 0 0 0-768z"/><path d="m689.728 521.024-264.32 264.32a12.8 12.8 0 0 1-18.112 0l-27.136-27.136a12.8 12.8 0 0 1 0-18.112L599.232 520.96a12.8 12.8 0 0 0 0-18.112l-215.36-215.232a12.8 12.8 0 0 1 0-18.112l27.2-27.136a12.8 12.8 0 0 1 18.112 0l260.544 260.608a12.8 12.8 0 0 1 0 18.048z"/></svg>',
 }
 
+export const RightDouble = {
+  name: 'right-double',
+  svg: '<svg viewBox="64 64 896 896" focusable="false"><path d="M490.752 265.344a32 32 0 0 0 0 45.312L681.92 501.824a12.8 12.8 0 0 1 0 18.112L489.344 712.448a32 32 0 0 0 45.312 45.248l224.192-224.192a32 32 0 0 0 0-45.248L536 265.344a32 32 0 0 0-45.248 0zm-224 0a32 32 0 0 0 0 45.312L457.92 501.76a12.8 12.8 0 0 1 0 18.112L265.344 712.384a32 32 0 1 0 45.312 45.248L534.848 533.44a32 32 0 0 0 0-45.248L312 265.344a32 32 0 0 0-45.248 0z"/></svg>',
+}
+
 export const Right = {
   name: 'right',
   svg: '<svg viewBox="64 64 896 896" focusable="false"><path d="M661.568 534.016a29.888 29.888 0 0 0 0-45.376L414.144 265.408a38.336 38.336 0 0 0-50.24 0 29.888 29.888 0 0 0 0 45.312l212.288 191.552a11.968 11.968 0 0 1 0 18.112L362.432 713.28a29.888 29.888 0 0 0 0 45.312 38.336 38.336 0 0 0 50.24 0l248.96-224.64z"/></svg>',
diff --git a/packages/components/icon/src/dependencies.ts b/packages/components/icon/src/dependencies.ts
index d5cb373e8..78317811b 100644
--- a/packages/components/icon/src/dependencies.ts
+++ b/packages/components/icon/src/dependencies.ts
@@ -14,6 +14,7 @@ import {
   Check,
   CheckCircle,
   CheckCircleFilled,
+  Clear,
   ClockCircle,
   Close,
   CloseCircle,
@@ -29,6 +30,7 @@ import {
   InfoCircle,
   InfoCircleFilled,
   Left,
+  LeftDouble,
   Loading,
   Menu,
   MenuFold,
@@ -38,6 +40,7 @@ import {
   QuestionCircle,
   QuestionCircleFilled,
   Right,
+  RightDouble,
   RotateLeft,
   RotateRight,
   Search,
@@ -57,8 +60,9 @@ export const IDUX_ICON_DEPENDENCIES: IconDefinition[] = [
   Check, // Progress Stepper
   CheckCircle, // Result Message Alert Notification
   CheckCircleFilled, // Progress Modal FormItem
+  Clear, // Transfer
   ClockCircle, // TimePicker
-  Close, // Stepper Modal Drawer Image Message Alert
+  Close, // Stepper Modal Drawer Image Message Alert Transfer
   CloseCircle, // TimePicker TimeRangePicker Input Textarea Notification
   CloseCircleFilled, // Modal FormItem
   DoubleLeft, // Pagination
@@ -72,6 +76,7 @@ export const IDUX_ICON_DEPENDENCIES: IconDefinition[] = [
   InfoCircle, // Message Result Alert Notification
   InfoCircleFilled, // Modal
   Left, // date-panel
+  LeftDouble, // Transfer
   Loading, // Message Button Spin FormItem Switch Timeline Tree
   Menu, // Layout
   MenuFold, // Layout
@@ -81,9 +86,10 @@ export const IDUX_ICON_DEPENDENCIES: IconDefinition[] = [
   QuestionCircle, // FormItem
   QuestionCircleFilled, // Modal
   Right, // Tree Menu Collapse
+  RightDouble, // Transfer
   RotateLeft, // Image
   RotateRight, // Image
-  Search, // Select
+  Search, // Select Transfer
   StarFilled, // Rate
   User, // Avatar
   TreeExpand, // TreeSelect
diff --git a/packages/components/index.ts b/packages/components/index.ts
index 882367387..e503afaba 100644
--- a/packages/components/index.ts
+++ b/packages/components/index.ts
@@ -59,6 +59,7 @@ import { IxTextarea } from '@idux/components/textarea'
 import { IxTimePicker, IxTimeRangePicker } from '@idux/components/time-picker'
 import { IxTimeline, IxTimelineItem } from '@idux/components/timeline'
 import { IxTooltip } from '@idux/components/tooltip'
+import { IxTransfer } from '@idux/components/transfer'
 import { IxTree } from '@idux/components/tree'
 import { IxTreeSelect } from '@idux/components/tree-select'
 import { IxTypography } from '@idux/components/typography'
@@ -146,6 +147,7 @@ const components = [
   IxTextarea,
   IxTimePicker,
   IxTimeRangePicker,
+  IxTransfer,
   IxTimeline,
   IxTimelineItem,
   IxTooltip,
diff --git a/packages/components/locales/src/langs/en-US.ts b/packages/components/locales/src/langs/en-US.ts
index 82385f866..3312e5068 100644
--- a/packages/components/locales/src/langs/en-US.ts
+++ b/packages/components/locales/src/langs/en-US.ts
@@ -92,6 +92,11 @@ const enUS: Locale = {
     separator: 'To',
     placeholder: ['Start time', 'End time'],
   },
+  transfer: {
+    toSelect: 'To select',
+    selected: 'Selected',
+    searchPlaceholder: ['Key words', 'Key words'],
+  },
   upload: {
     uploading: 'Uploading...',
     error: 'Upload error',
diff --git a/packages/components/locales/src/langs/zh-CN.ts b/packages/components/locales/src/langs/zh-CN.ts
index 86b9ca364..901e28338 100755
--- a/packages/components/locales/src/langs/zh-CN.ts
+++ b/packages/components/locales/src/langs/zh-CN.ts
@@ -92,6 +92,11 @@ const zhCN: Locale = {
     separator: '至',
     placeholder: ['起始时间', '结束时间'],
   },
+  transfer: {
+    toSelect: '待选',
+    selected: '已选',
+    searchPlaceholder: ['搜索关键字', '搜索关键字'],
+  },
   upload: {
     uploading: '正在上传...',
     error: '上传失败',
diff --git a/packages/components/locales/src/types.ts b/packages/components/locales/src/types.ts
index 86646d710..68363f702 100644
--- a/packages/components/locales/src/types.ts
+++ b/packages/components/locales/src/types.ts
@@ -98,6 +98,12 @@ export interface TimeRangePickerLocale {
   placeholder: [string, string]
 }
 
+export interface TransferLocale {
+  toSelect: string
+  selected: string
+  searchPlaceholder: [string, string]
+}
+
 export interface UploadLocale {
   uploading: string
   error: string
@@ -121,6 +127,7 @@ export interface Locale {
   table: TableLocale
   timePicker: TimePickerLocale
   timeRangePicker: TimeRangePickerLocale
+  transfer: TransferLocale
   upload: UploadLocale
 }
 
diff --git a/packages/components/style/variable/prefix.less b/packages/components/style/variable/prefix.less
index e3c02ea0b..331452991 100644
--- a/packages/components/style/variable/prefix.less
+++ b/packages/components/style/variable/prefix.less
@@ -63,6 +63,7 @@
 @textarea-prefix: ~'@{idux-prefix}-textarea';
 @time-picker-prefix: ~'@{idux-prefix}-time-picker';
 @time-range-picker-prefix: ~'@{idux-prefix}-time-range-picker';
+@transfer-prefix: ~'@{idux-prefix}-transfer';
 @tree-select-prefix: ~'@{idux-prefix}-tree-select';
 @tree-select-option-prefix: ~'@{idux-prefix}-tree-select-option';
 @upload-prefix: ~'@{idux-prefix}-upload';
@@ -88,6 +89,7 @@
 @affix-prefix: ~'@{idux-prefix}-affix';
 
 // Private
+@checkable-list-prefix: ~'@{idux-prefix}-checkable-list';
 @collapse-transition-prefix: ~'@{idux-prefix}-collapse-transition';
 @date-panel-prefix: ~'@{idux-prefix}-date-panel';
 @mask-prefix: ~'@{idux-prefix}-mask';
diff --git a/packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap b/packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap
new file mode 100644
index 000000000..b046f6d29
--- /dev/null
+++ b/packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Transfer render work 1`] = `
+"<div class=\\"ix-transfer\\">
+  <div class=\\"ix-transfer-list ix-transfer-list-source\\">
+    <div class=\\"ix-transfer-list-header\\">
+      <div class=\\"ix-transfer-list-header-inner\\"><label class=\\"ix-checkbox ix-transfer-list-header-check-all\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+          <!---->
+          <!---->
+        </label><span class=\\"ix-transfer-list-header-label\\">待选 (20)</span>
+        <!---->
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <div class=\\"ix-transfer-list-body\\">
+      <div class=\\"ix-checkable-list\\">
+        <ul class=\\"ix-checkable-list-inner\\">
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"0\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item ix-checkable-list-item-disabled\\"><label class=\\"ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\" value=\\"1\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"2\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"3\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"4\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"5\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item ix-checkable-list-item-disabled\\"><label class=\\"ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\" value=\\"6\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"7\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"8\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"9\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"10\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"11\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item ix-checkable-list-item-disabled\\"><label class=\\"ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\" value=\\"12\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"13\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"14\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"15\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item ix-checkable-list-item-disabled\\"><label class=\\"ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\" value=\\"16\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"17\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"18\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"19\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!---->
+  </div>
+  <div class=\\"ix-transfer-operations\\">
+    <div class=\\"ix-transfer-operations-inner\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-md ix-transfer-operations-btn\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right-double\\" role=\\"img\\" aria-label=\\"right-double\\"></i></button><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-md ix-transfer-operations-btn\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left-double\\" role=\\"img\\" aria-label=\\"left-double\\"></i></button></div>
+  </div>
+  <div class=\\"ix-transfer-list ix-transfer-list-target\\">
+    <div class=\\"ix-transfer-list-header\\">
+      <div class=\\"ix-transfer-list-header-inner\\"><label class=\\"ix-checkbox ix-checkbox-disabled ix-transfer-list-header-check-all\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+          <!---->
+          <!---->
+        </label><span class=\\"ix-transfer-list-header-label\\">已选 (0)</span>
+        <!----><span class=\\"ix-transfer-list-header-clear-icon ix-transfer-list-header-clear-icon-disabled\\"><i class=\\"ix-icon ix-icon-clear\\" role=\\"img\\" aria-label=\\"clear\\"></i></span>
+        <!---->
+      </div>
+    </div>
+    <div class=\\"ix-transfer-list-body\\">
+      <div class=\\"ix-transfer-list-body-empty-wrapper\\">
+        <div class=\\"ix-empty\\">
+          <div class=\\"ix-empty-image\\"><i class=\\"ix-icon ix-icon-empty\\" role=\\"img\\" aria-label=\\"empty\\"></i></div>
+          <div class=\\"ix-empty-description\\">暂无数据</div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>"
+`;
diff --git a/packages/components/transfer/__tests__/__snapshots__/transferSlots.spec.ts.snap b/packages/components/transfer/__tests__/__snapshots__/transferSlots.spec.ts.snap
new file mode 100644
index 000000000..fb76f37bb
--- /dev/null
+++ b/packages/components/transfer/__tests__/__snapshots__/transferSlots.spec.ts.snap
@@ -0,0 +1,4346 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Transfer clearIcon slot work 1`] = `
+<div
+  class="ix-transfer"
+>
+  <div
+    class="ix-transfer-list ix-transfer-list-source"
+  >
+    
+    <div
+      class="ix-transfer-list-header"
+    >
+      <div
+        class="ix-transfer-list-header-inner"
+      >
+        <label
+          aria-checked="false"
+          aria-disabled="false"
+          class="ix-checkbox ix-transfer-list-header-check-all"
+          role="checkbox"
+        >
+          <span
+            class="ix-checkbox-input"
+          >
+            <input
+              aria-hidden="true"
+              class="ix-checkbox-input-inner"
+              type="checkbox"
+            />
+            <span
+              class="ix-checkbox-input-box"
+            />
+          </span>
+          <!---->
+          <!---->
+        </label>
+        <span
+          class="ix-transfer-list-header-label"
+        >
+          待选 (20)
+        </span>
+        <!---->
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-body"
+    >
+      <div
+        class="ix-checkable-list"
+      >
+        <ul
+          class="ix-checkable-list-inner"
+        >
+          
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="0"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="1"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="2"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="3"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="4"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="5"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="6"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="7"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="8"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="9"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="10"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="11"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="12"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="13"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="14"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="15"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="16"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="17"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="18"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="19"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          
+        </ul>
+      </div>
+    </div>
+    <!---->
+    
+  </div>
+  <div
+    class="ix-transfer-operations"
+  >
+    <div
+      class="ix-transfer-operations-inner"
+    >
+      <button
+        class="ix-button ix-button-disabled ix-button-icon-only ix-button-md ix-transfer-operations-btn"
+        disabled=""
+        type="button"
+      >
+        
+        <i
+          aria-label="right-double"
+          class="ix-icon ix-icon-right-double"
+          role="img"
+        />
+        
+      </button>
+      <button
+        class="ix-button ix-button-disabled ix-button-icon-only ix-button-md ix-transfer-operations-btn"
+        disabled=""
+        type="button"
+      >
+        
+        <i
+          aria-label="left-double"
+          class="ix-icon ix-icon-left-double"
+          role="img"
+        />
+        
+      </button>
+    </div>
+  </div>
+  <div
+    class="ix-transfer-list ix-transfer-list-target"
+  >
+    
+    <div
+      class="ix-transfer-list-header"
+    >
+      <div
+        class="ix-transfer-list-header-inner"
+      >
+        <label
+          aria-checked="false"
+          aria-disabled="true"
+          class="ix-checkbox ix-checkbox-disabled ix-transfer-list-header-check-all"
+          role="checkbox"
+        >
+          <span
+            class="ix-checkbox-input"
+          >
+            <input
+              aria-hidden="true"
+              class="ix-checkbox-input-inner"
+              disabled=""
+              type="checkbox"
+            />
+            <span
+              class="ix-checkbox-input-box"
+            />
+          </span>
+          <!---->
+          <!---->
+        </label>
+        <span
+          class="ix-transfer-list-header-label"
+        >
+          已选 (0)
+        </span>
+        <!---->
+        <span
+          class="ix-transfer-list-header-clear-icon ix-transfer-list-header-clear-icon-disabled"
+        >
+          
+          <div
+            class="custom-clear-icon-slot-test"
+          />
+          
+        </span>
+        <!---->
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-body"
+    >
+      <div
+        class="ix-transfer-list-body-empty-wrapper"
+      >
+        <div
+          class="ix-empty"
+        >
+          <div
+            class="ix-empty-image"
+          >
+            <i
+              aria-label="empty"
+              class="ix-icon ix-icon-empty"
+              role="img"
+            />
+          </div>
+          <div
+            class="ix-empty-description"
+          >
+            暂无数据
+          </div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <!---->
+    
+  </div>
+</div>
+`;
+
+exports[`Transfer default slot work 1`] = `
+<div
+  class="ix-transfer"
+>
+  <div
+    class="ix-transfer-list ix-transfer-list-source"
+  >
+    
+    <div
+      class="ix-transfer-list-header"
+    >
+      <div
+        class="ix-transfer-list-header-inner"
+      >
+        <label
+          aria-checked="false"
+          aria-disabled="false"
+          class="ix-checkbox ix-transfer-list-header-check-all"
+          role="checkbox"
+        >
+          <span
+            class="ix-checkbox-input"
+          >
+            <input
+              aria-hidden="true"
+              class="ix-checkbox-input-inner"
+              type="checkbox"
+            />
+            <span
+              class="ix-checkbox-input-box"
+            />
+          </span>
+          <!---->
+          <!---->
+        </label>
+        <span
+          class="ix-transfer-list-header-label"
+        >
+          待选 (20)
+        </span>
+        <span
+          class="ix-input ix-input-sm ix-input-with-suffix ix-transfer-list-header-search-input"
+        >
+          <!---->
+          <input
+            class="ix-input-inner"
+            placeholder="搜索关键字"
+            type="text"
+          />
+          <span
+            class="ix-input-suffix"
+          >
+            
+            <i
+              aria-label="search"
+              class="ix-icon ix-icon-search ix-transfer-list-header-search-icon"
+              role="img"
+            />
+            
+          </span>
+          <!---->
+        </span>
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-body"
+    >
+      
+      <div>
+        <span
+          class="source-data"
+        >
+          20
+        </span>
+        <span
+          class="source-filteredData"
+        >
+          20
+        </span>
+        <span
+          class="source-paginatedData"
+        >
+          20
+        </span>
+        <span
+          class="source-dataSource"
+        >
+          20
+        </span>
+        <span
+          class="source-dataKeyMap"
+        >
+          20
+        </span>
+        <span
+          class="source-filteredDataSource"
+        >
+          20
+        </span>
+        <span
+          class="source-paginatedDataSource"
+        >
+          20
+        </span>
+        <span
+          class="source-targetKeySet"
+        >
+          0
+        </span>
+        <span
+          class="source-selectedKeys"
+        >
+          0
+        </span>
+        <span
+          class="source-selectedKeySet"
+        >
+          0
+        </span>
+        <span
+          class="source-disabledKeys"
+        >
+          4
+        </span>
+        <span
+          class="source-selectAllDisabled"
+        >
+          false
+        </span>
+        <span
+          class="source-selectAllStatus"
+        >
+          false-false
+        </span>
+        <span
+          class="source-showSelectAll"
+        >
+          true
+        </span>
+        <span
+          class="source-searchable"
+        >
+          true
+        </span>
+        <span
+          class="source-handleSelectChange"
+        />
+        <span
+          class="source-selectAll"
+        />
+        <span
+          class="source-searchValue"
+        />
+        <span
+          class="source-handleSearchChange"
+        />
+      </div>
+      
+    </div>
+    <!---->
+    
+  </div>
+  <div
+    class="ix-transfer-operations"
+  >
+    
+    <div>
+      <span
+        class="triggerAppend"
+      />
+      <span
+        class="triggerRemove"
+      />
+      <span
+        class="triggerAppendAll"
+      />
+      <span
+        class="triggerClear"
+      />
+    </div>
+    
+  </div>
+  <div
+    class="ix-transfer-list ix-transfer-list-target"
+  >
+    
+    <div
+      class="ix-transfer-list-header"
+    >
+      <div
+        class="ix-transfer-list-header-inner"
+      >
+        <label
+          aria-checked="false"
+          aria-disabled="true"
+          class="ix-checkbox ix-checkbox-disabled ix-transfer-list-header-check-all"
+          role="checkbox"
+        >
+          <span
+            class="ix-checkbox-input"
+          >
+            <input
+              aria-hidden="true"
+              class="ix-checkbox-input-inner"
+              disabled=""
+              type="checkbox"
+            />
+            <span
+              class="ix-checkbox-input-box"
+            />
+          </span>
+          <!---->
+          <!---->
+        </label>
+        <span
+          class="ix-transfer-list-header-label"
+        >
+          已选 (0)
+        </span>
+        <span
+          class="ix-input ix-input-sm ix-input-with-suffix ix-transfer-list-header-search-input"
+        >
+          <!---->
+          <input
+            class="ix-input-inner"
+            placeholder="搜索关键字"
+            type="text"
+          />
+          <span
+            class="ix-input-suffix"
+          >
+            
+            <i
+              aria-label="search"
+              class="ix-icon ix-icon-search ix-transfer-list-header-search-icon"
+              role="img"
+            />
+            
+          </span>
+          <!---->
+        </span>
+        <span
+          class="ix-transfer-list-header-clear-icon ix-transfer-list-header-clear-icon-disabled"
+        >
+          <i
+            aria-label="clear"
+            class="ix-icon ix-icon-clear"
+            role="img"
+          />
+        </span>
+        <!---->
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-body"
+    >
+      
+      <div>
+        <span
+          class="target-data"
+        >
+          0
+        </span>
+        <span
+          class="target-filteredData"
+        >
+          0
+        </span>
+        <span
+          class="target-paginatedData"
+        >
+          0
+        </span>
+        <span
+          class="target-dataSource"
+        >
+          20
+        </span>
+        <span
+          class="target-dataKeyMap"
+        >
+          20
+        </span>
+        <span
+          class="target-filteredDataSource"
+        >
+          20
+        </span>
+        <span
+          class="target-paginatedDataSource"
+        >
+          20
+        </span>
+        <span
+          class="target-targetKeySet"
+        >
+          0
+        </span>
+        <span
+          class="target-selectedKeys"
+        >
+          0
+        </span>
+        <span
+          class="target-selectedKeySet"
+        >
+          0
+        </span>
+        <span
+          class="target-disabledKeys"
+        >
+          0
+        </span>
+        <span
+          class="target-selectAllDisabled"
+        >
+          true
+        </span>
+        <span
+          class="target-selectAllStatus"
+        >
+          false-false
+        </span>
+        <span
+          class="target-showSelectAll"
+        >
+          true
+        </span>
+        <span
+          class="target-searchable"
+        >
+          true
+        </span>
+        <span
+          class="target-handleSelectChange"
+        />
+        <span
+          class="target-selectAll"
+        />
+        <span
+          class="target-searchValue"
+        />
+        <span
+          class="target-handleSearchChange"
+        />
+      </div>
+      
+    </div>
+    <!---->
+    
+  </div>
+</div>
+`;
+
+exports[`Transfer empty slot work 1`] = `
+<div
+  class="ix-transfer"
+>
+  <div
+    class="ix-transfer-list ix-transfer-list-source"
+  >
+    
+    <div
+      class="ix-transfer-list-header"
+    >
+      <div
+        class="ix-transfer-list-header-inner"
+      >
+        <label
+          aria-checked="false"
+          aria-disabled="false"
+          class="ix-checkbox ix-transfer-list-header-check-all"
+          role="checkbox"
+        >
+          <span
+            class="ix-checkbox-input"
+          >
+            <input
+              aria-hidden="true"
+              class="ix-checkbox-input-inner"
+              type="checkbox"
+            />
+            <span
+              class="ix-checkbox-input-box"
+            />
+          </span>
+          <!---->
+          <!---->
+        </label>
+        <span
+          class="ix-transfer-list-header-label"
+        >
+          待选 (20)
+        </span>
+        <!---->
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-body"
+    >
+      <div
+        class="ix-checkable-list"
+      >
+        <ul
+          class="ix-checkable-list-inner"
+        >
+          
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="0"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="1"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="2"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="3"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="4"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="5"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="6"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="7"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="8"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="9"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="10"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="11"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="12"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="13"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="14"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="15"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="16"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="17"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="18"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="19"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          
+        </ul>
+      </div>
+    </div>
+    <!---->
+    
+  </div>
+  <div
+    class="ix-transfer-operations"
+  >
+    <div
+      class="ix-transfer-operations-inner"
+    >
+      <button
+        class="ix-button ix-button-disabled ix-button-icon-only ix-button-md ix-transfer-operations-btn"
+        disabled=""
+        type="button"
+      >
+        
+        <i
+          aria-label="right-double"
+          class="ix-icon ix-icon-right-double"
+          role="img"
+        />
+        
+      </button>
+      <button
+        class="ix-button ix-button-disabled ix-button-icon-only ix-button-md ix-transfer-operations-btn"
+        disabled=""
+        type="button"
+      >
+        
+        <i
+          aria-label="left-double"
+          class="ix-icon ix-icon-left-double"
+          role="img"
+        />
+        
+      </button>
+    </div>
+  </div>
+  <div
+    class="ix-transfer-list ix-transfer-list-target"
+  >
+    
+    <div
+      class="ix-transfer-list-header"
+    >
+      <div
+        class="ix-transfer-list-header-inner"
+      >
+        <label
+          aria-checked="false"
+          aria-disabled="true"
+          class="ix-checkbox ix-checkbox-disabled ix-transfer-list-header-check-all"
+          role="checkbox"
+        >
+          <span
+            class="ix-checkbox-input"
+          >
+            <input
+              aria-hidden="true"
+              class="ix-checkbox-input-inner"
+              disabled=""
+              type="checkbox"
+            />
+            <span
+              class="ix-checkbox-input-box"
+            />
+          </span>
+          <!---->
+          <!---->
+        </label>
+        <span
+          class="ix-transfer-list-header-label"
+        >
+          已选 (0)
+        </span>
+        <!---->
+        <span
+          class="ix-transfer-list-header-clear-icon ix-transfer-list-header-clear-icon-disabled"
+        >
+          <i
+            aria-label="clear"
+            class="ix-icon ix-icon-clear"
+            role="img"
+          />
+        </span>
+        <!---->
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-body"
+    >
+      <div
+        class="ix-transfer-list-body-empty-wrapper"
+      >
+        
+        <div
+          class="custom-empty-slot-test"
+        />
+        
+      </div>
+    </div>
+    <!---->
+    
+  </div>
+</div>
+`;
+
+exports[`Transfer footer slot work 1`] = `
+<div
+  class="ix-transfer"
+>
+  <div
+    class="ix-transfer-list ix-transfer-list-source"
+  >
+    
+    <div
+      class="ix-transfer-list-header"
+    >
+      <div
+        class="ix-transfer-list-header-inner"
+      >
+        <label
+          aria-checked="false"
+          aria-disabled="false"
+          class="ix-checkbox ix-transfer-list-header-check-all"
+          role="checkbox"
+        >
+          <span
+            class="ix-checkbox-input"
+          >
+            <input
+              aria-hidden="true"
+              class="ix-checkbox-input-inner"
+              type="checkbox"
+            />
+            <span
+              class="ix-checkbox-input-box"
+            />
+          </span>
+          <!---->
+          <!---->
+        </label>
+        <span
+          class="ix-transfer-list-header-label"
+        >
+          待选 (20)
+        </span>
+        <span
+          class="ix-input ix-input-sm ix-input-with-suffix ix-transfer-list-header-search-input"
+        >
+          <!---->
+          <input
+            class="ix-input-inner"
+            placeholder="搜索关键字"
+            type="text"
+          />
+          <span
+            class="ix-input-suffix"
+          >
+            
+            <i
+              aria-label="search"
+              class="ix-icon ix-icon-search ix-transfer-list-header-search-icon"
+              role="img"
+            />
+            
+          </span>
+          <!---->
+        </span>
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-body"
+    >
+      <div
+        class="ix-checkable-list"
+      >
+        <ul
+          class="ix-checkable-list-inner"
+        >
+          
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="0"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="1"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="2"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="3"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="4"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="5"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="6"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="7"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="8"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="9"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="10"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="11"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="12"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="13"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="14"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="15"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="16"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="17"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="18"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="19"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          
+        </ul>
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-footer"
+    >
+      
+      <div>
+        <span
+          class="source-data"
+        >
+          20
+        </span>
+        <span
+          class="source-filteredData"
+        >
+          20
+        </span>
+        <span
+          class="source-paginatedData"
+        >
+          20
+        </span>
+        <span
+          class="source-dataSource"
+        >
+          20
+        </span>
+        <span
+          class="source-dataKeyMap"
+        >
+          20
+        </span>
+        <span
+          class="source-filteredDataSource"
+        >
+          20
+        </span>
+        <span
+          class="source-paginatedDataSource"
+        >
+          20
+        </span>
+        <span
+          class="source-targetKeySet"
+        >
+          0
+        </span>
+        <span
+          class="source-selectedKeys"
+        >
+          0
+        </span>
+        <span
+          class="source-selectedKeySet"
+        >
+          0
+        </span>
+        <span
+          class="source-disabledKeys"
+        >
+          4
+        </span>
+        <span
+          class="source-selectAllDisabled"
+        >
+          false
+        </span>
+        <span
+          class="source-selectAllStatus"
+        >
+          false-false
+        </span>
+        <span
+          class="source-showSelectAll"
+        >
+          true
+        </span>
+        <span
+          class="source-searchable"
+        >
+          true
+        </span>
+        <span
+          class="source-handleSelectChange"
+        />
+        <span
+          class="source-selectAll"
+        />
+        <span
+          class="source-searchValue"
+        />
+        <span
+          class="source-handleSearchChange"
+        />
+      </div>
+      
+    </div>
+    
+  </div>
+  <div
+    class="ix-transfer-operations"
+  >
+    
+    <div>
+      <span
+        class="triggerAppend"
+      />
+      <span
+        class="triggerRemove"
+      />
+      <span
+        class="triggerAppendAll"
+      />
+      <span
+        class="triggerClear"
+      />
+    </div>
+    
+  </div>
+  <div
+    class="ix-transfer-list ix-transfer-list-target"
+  >
+    
+    <div
+      class="ix-transfer-list-header"
+    >
+      <div
+        class="ix-transfer-list-header-inner"
+      >
+        <label
+          aria-checked="false"
+          aria-disabled="true"
+          class="ix-checkbox ix-checkbox-disabled ix-transfer-list-header-check-all"
+          role="checkbox"
+        >
+          <span
+            class="ix-checkbox-input"
+          >
+            <input
+              aria-hidden="true"
+              class="ix-checkbox-input-inner"
+              disabled=""
+              type="checkbox"
+            />
+            <span
+              class="ix-checkbox-input-box"
+            />
+          </span>
+          <!---->
+          <!---->
+        </label>
+        <span
+          class="ix-transfer-list-header-label"
+        >
+          已选 (0)
+        </span>
+        <span
+          class="ix-input ix-input-sm ix-input-with-suffix ix-transfer-list-header-search-input"
+        >
+          <!---->
+          <input
+            class="ix-input-inner"
+            placeholder="搜索关键字"
+            type="text"
+          />
+          <span
+            class="ix-input-suffix"
+          >
+            
+            <i
+              aria-label="search"
+              class="ix-icon ix-icon-search ix-transfer-list-header-search-icon"
+              role="img"
+            />
+            
+          </span>
+          <!---->
+        </span>
+        <span
+          class="ix-transfer-list-header-clear-icon ix-transfer-list-header-clear-icon-disabled"
+        >
+          <i
+            aria-label="clear"
+            class="ix-icon ix-icon-clear"
+            role="img"
+          />
+        </span>
+        <!---->
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-body"
+    >
+      <div
+        class="ix-transfer-list-body-empty-wrapper"
+      >
+        <div
+          class="ix-empty"
+        >
+          <div
+            class="ix-empty-image"
+          >
+            <i
+              aria-label="empty"
+              class="ix-icon ix-icon-empty"
+              role="img"
+            />
+          </div>
+          <div
+            class="ix-empty-description"
+          >
+            暂无数据
+          </div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-footer"
+    >
+      
+      <div>
+        <span
+          class="target-data"
+        >
+          0
+        </span>
+        <span
+          class="target-filteredData"
+        >
+          0
+        </span>
+        <span
+          class="target-paginatedData"
+        >
+          0
+        </span>
+        <span
+          class="target-dataSource"
+        >
+          20
+        </span>
+        <span
+          class="target-dataKeyMap"
+        >
+          20
+        </span>
+        <span
+          class="target-filteredDataSource"
+        >
+          20
+        </span>
+        <span
+          class="target-paginatedDataSource"
+        >
+          20
+        </span>
+        <span
+          class="target-targetKeySet"
+        >
+          0
+        </span>
+        <span
+          class="target-selectedKeys"
+        >
+          0
+        </span>
+        <span
+          class="target-selectedKeySet"
+        >
+          0
+        </span>
+        <span
+          class="target-disabledKeys"
+        >
+          0
+        </span>
+        <span
+          class="target-selectAllDisabled"
+        >
+          true
+        </span>
+        <span
+          class="target-selectAllStatus"
+        >
+          false-false
+        </span>
+        <span
+          class="target-showSelectAll"
+        >
+          true
+        </span>
+        <span
+          class="target-searchable"
+        >
+          true
+        </span>
+        <span
+          class="target-handleSelectChange"
+        />
+        <span
+          class="target-selectAll"
+        />
+        <span
+          class="target-searchValue"
+        />
+        <span
+          class="target-handleSearchChange"
+        />
+      </div>
+      
+    </div>
+    
+  </div>
+</div>
+`;
+
+exports[`Transfer headerLabel slot work 1`] = `
+<div
+  class="ix-transfer"
+>
+  <div
+    class="ix-transfer-list ix-transfer-list-source"
+  >
+    
+    <div
+      class="ix-transfer-list-header"
+    >
+      <div
+        class="ix-transfer-list-header-inner"
+      >
+        <label
+          aria-checked="false"
+          aria-disabled="false"
+          class="ix-checkbox ix-transfer-list-header-check-all"
+          role="checkbox"
+        >
+          <span
+            class="ix-checkbox-input"
+          >
+            <input
+              aria-hidden="true"
+              class="ix-checkbox-input-inner"
+              type="checkbox"
+            />
+            <span
+              class="ix-checkbox-input-box"
+            />
+          </span>
+          <!---->
+          <!---->
+        </label>
+        <span
+          class="ix-transfer-list-header-label"
+        >
+          
+          <div
+            class="custom-header-label-slot-test-source"
+          >
+            20
+          </div>
+          
+        </span>
+        <!---->
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-body"
+    >
+      <div
+        class="ix-checkable-list"
+      >
+        <ul
+          class="ix-checkable-list-inner"
+        >
+          
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="0"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="1"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="2"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="3"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="4"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="5"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="6"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="7"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="8"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="9"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="10"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="11"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="12"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="13"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="14"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="15"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="16"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="17"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="18"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="19"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <!---->
+              <!---->
+            </label>
+            <!---->
+          </li>
+          
+        </ul>
+      </div>
+    </div>
+    <!---->
+    
+  </div>
+  <div
+    class="ix-transfer-operations"
+  >
+    <div
+      class="ix-transfer-operations-inner"
+    >
+      <button
+        class="ix-button ix-button-disabled ix-button-icon-only ix-button-md ix-transfer-operations-btn"
+        disabled=""
+        type="button"
+      >
+        
+        <i
+          aria-label="right-double"
+          class="ix-icon ix-icon-right-double"
+          role="img"
+        />
+        
+      </button>
+      <button
+        class="ix-button ix-button-disabled ix-button-icon-only ix-button-md ix-transfer-operations-btn"
+        disabled=""
+        type="button"
+      >
+        
+        <i
+          aria-label="left-double"
+          class="ix-icon ix-icon-left-double"
+          role="img"
+        />
+        
+      </button>
+    </div>
+  </div>
+  <div
+    class="ix-transfer-list ix-transfer-list-target"
+  >
+    
+    <div
+      class="ix-transfer-list-header"
+    >
+      <div
+        class="ix-transfer-list-header-inner"
+      >
+        <label
+          aria-checked="false"
+          aria-disabled="true"
+          class="ix-checkbox ix-checkbox-disabled ix-transfer-list-header-check-all"
+          role="checkbox"
+        >
+          <span
+            class="ix-checkbox-input"
+          >
+            <input
+              aria-hidden="true"
+              class="ix-checkbox-input-inner"
+              disabled=""
+              type="checkbox"
+            />
+            <span
+              class="ix-checkbox-input-box"
+            />
+          </span>
+          <!---->
+          <!---->
+        </label>
+        <span
+          class="ix-transfer-list-header-label"
+        >
+          
+          <div
+            class="custom-header-label-slot-test-target"
+          >
+            0
+          </div>
+          
+        </span>
+        <!---->
+        <span
+          class="ix-transfer-list-header-clear-icon ix-transfer-list-header-clear-icon-disabled"
+        >
+          <i
+            aria-label="clear"
+            class="ix-icon ix-icon-clear"
+            role="img"
+          />
+        </span>
+        <!---->
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-body"
+    >
+      <div
+        class="ix-transfer-list-body-empty-wrapper"
+      >
+        <div
+          class="ix-empty"
+        >
+          <div
+            class="ix-empty-image"
+          >
+            <i
+              aria-label="empty"
+              class="ix-icon ix-icon-empty"
+              role="img"
+            />
+          </div>
+          <div
+            class="ix-empty-description"
+          >
+            暂无数据
+          </div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <!---->
+    
+  </div>
+</div>
+`;
+
+exports[`Transfer label slot work 1`] = `
+<div
+  class="ix-transfer"
+>
+  <div
+    class="ix-transfer-list ix-transfer-list-source"
+  >
+    
+    <div
+      class="ix-transfer-list-header"
+    >
+      <div
+        class="ix-transfer-list-header-inner"
+      >
+        <label
+          aria-checked="false"
+          aria-disabled="false"
+          class="ix-checkbox ix-transfer-list-header-check-all"
+          role="checkbox"
+        >
+          <span
+            class="ix-checkbox-input"
+          >
+            <input
+              aria-hidden="true"
+              class="ix-checkbox-input-inner"
+              type="checkbox"
+            />
+            <span
+              class="ix-checkbox-input-box"
+            />
+          </span>
+          <!---->
+          <!---->
+        </label>
+        <span
+          class="ix-transfer-list-header-label"
+        >
+          待选 (20)
+        </span>
+        <!---->
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-body"
+    >
+      <div
+        class="ix-checkable-list"
+      >
+        <ul
+          class="ix-checkable-list-inner"
+        >
+          
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="0"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="1"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="2"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="3"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="4"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="5"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="6"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="7"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="8"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="9"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="10"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="11"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="12"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="13"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="14"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="15"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item ix-checkable-list-item-disabled"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="true"
+              class="ix-checkbox ix-checkbox-disabled ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  disabled=""
+                  type="checkbox"
+                  value="16"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="17"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="18"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          <li
+            class="ix-checkable-list-item"
+          >
+            <label
+              aria-checked="false"
+              aria-disabled="false"
+              class="ix-checkbox ix-checkable-list-item-checkbox"
+              role="checkbox"
+            >
+              <span
+                class="ix-checkbox-input"
+              >
+                <input
+                  aria-hidden="true"
+                  class="ix-checkbox-input-inner"
+                  type="checkbox"
+                  value="19"
+                />
+                <span
+                  class="ix-checkbox-input-box"
+                />
+              </span>
+              <span
+                class="ix-checkbox-label"
+              >
+                
+                <div
+                  class="custom-label-slot-test"
+                />
+                
+              </span>
+              <!---->
+            </label>
+            <!---->
+          </li>
+          
+        </ul>
+      </div>
+    </div>
+    <!---->
+    
+  </div>
+  <div
+    class="ix-transfer-operations"
+  >
+    <div
+      class="ix-transfer-operations-inner"
+    >
+      <button
+        class="ix-button ix-button-disabled ix-button-icon-only ix-button-md ix-transfer-operations-btn"
+        disabled=""
+        type="button"
+      >
+        
+        <i
+          aria-label="right-double"
+          class="ix-icon ix-icon-right-double"
+          role="img"
+        />
+        
+      </button>
+      <button
+        class="ix-button ix-button-disabled ix-button-icon-only ix-button-md ix-transfer-operations-btn"
+        disabled=""
+        type="button"
+      >
+        
+        <i
+          aria-label="left-double"
+          class="ix-icon ix-icon-left-double"
+          role="img"
+        />
+        
+      </button>
+    </div>
+  </div>
+  <div
+    class="ix-transfer-list ix-transfer-list-target"
+  >
+    
+    <div
+      class="ix-transfer-list-header"
+    >
+      <div
+        class="ix-transfer-list-header-inner"
+      >
+        <label
+          aria-checked="false"
+          aria-disabled="true"
+          class="ix-checkbox ix-checkbox-disabled ix-transfer-list-header-check-all"
+          role="checkbox"
+        >
+          <span
+            class="ix-checkbox-input"
+          >
+            <input
+              aria-hidden="true"
+              class="ix-checkbox-input-inner"
+              disabled=""
+              type="checkbox"
+            />
+            <span
+              class="ix-checkbox-input-box"
+            />
+          </span>
+          <!---->
+          <!---->
+        </label>
+        <span
+          class="ix-transfer-list-header-label"
+        >
+          已选 (0)
+        </span>
+        <!---->
+        <span
+          class="ix-transfer-list-header-clear-icon ix-transfer-list-header-clear-icon-disabled"
+        >
+          <i
+            aria-label="clear"
+            class="ix-icon ix-icon-clear"
+            role="img"
+          />
+        </span>
+        <!---->
+      </div>
+    </div>
+    <div
+      class="ix-transfer-list-body"
+    >
+      <div
+        class="ix-transfer-list-body-empty-wrapper"
+      >
+        <div
+          class="ix-empty"
+        >
+          <div
+            class="ix-empty-image"
+          >
+            <i
+              aria-label="empty"
+              class="ix-icon ix-icon-empty"
+              role="img"
+            />
+          </div>
+          <div
+            class="ix-empty-description"
+          >
+            暂无数据
+          </div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <!---->
+    
+  </div>
+</div>
+`;
diff --git a/packages/components/transfer/__tests__/transfer.spec.ts b/packages/components/transfer/__tests__/transfer.spec.ts
new file mode 100644
index 000000000..56674d233
--- /dev/null
+++ b/packages/components/transfer/__tests__/transfer.spec.ts
@@ -0,0 +1,432 @@
+import { MountingOptions, mount } from '@vue/test-utils'
+
+import { renderWork } from '@tests'
+
+import CheckableListItem from '@idux/components/_private/checkable-list/src/CheckableListItem'
+import { ɵInput } from '@idux/components/_private/input'
+import { IxButton } from '@idux/components/button'
+import { IxCheckbox } from '@idux/components/checkbox'
+import { IxSpin } from '@idux/components/spin'
+
+import Transfer from '../src/Transfer'
+import TransferOperations from '../src/TransferOperations'
+import TransferList from '../src/list/TransferList'
+import TransferListHeader from '../src/list/TransferListHeader'
+import { TransferProps } from '../src/types'
+
+const mockedDataSource = Array.from(new Array(20)).map((_, idx) => ({
+  key: idx,
+  value: idx,
+  disabled: [1, 6, 12, 16].includes(idx),
+}))
+
+describe('Transfer', () => {
+  const TransferMount = (options?: MountingOptions<Partial<TransferProps>>) =>
+    mount(Transfer, { ...(options as MountingOptions<TransferProps>) })
+
+  renderWork<TransferProps>(Transfer, {
+    props: {
+      dataSource: mockedDataSource,
+    },
+  })
+
+  test('dataSource work', async () => {
+    const wrapper = TransferMount({ props: { dataSource: mockedDataSource } })
+
+    const [sourceList, targetList] = wrapper.findAllComponents(TransferList)
+    expect(sourceList.findAllComponents(CheckableListItem).length).toBe(20)
+    expect(targetList.findAllComponents(CheckableListItem).length).toBe(0)
+  })
+
+  test('v-model:value work', async () => {
+    const wrapper = TransferMount({ props: { dataSource: mockedDataSource, value: [1] } })
+    const [sourceList, targetList] = wrapper.findAllComponents(TransferList)
+    expect(sourceList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === 1) > -1).toBeFalsy()
+    expect(
+      targetList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === 1) > -1,
+    ).toBeTruthy()
+
+    await wrapper.setProps({ value: [2] })
+    expect(
+      sourceList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === 1) > -1,
+    ).toBeTruthy()
+    expect(targetList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === 1) > -1).toBeFalsy()
+    expect(sourceList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === 2) > -1).toBeFalsy()
+    expect(
+      targetList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === 2) > -1,
+    ).toBeTruthy()
+  })
+
+  test('transfer work', async () => {
+    const onChange = jest.fn()
+    const wrapper = TransferMount({ props: { dataSource: mockedDataSource, onChange } })
+
+    const [sourceList, targetList] = wrapper.findAllComponents(TransferList)
+    const [appendTrigger, removeTrigger] = wrapper.findComponent(TransferOperations).findAllComponents(IxButton)
+    await Promise.all(
+      sourceList
+        .findAllComponents(CheckableListItem)
+        .filter(item => [1, 2, 3, 4, 5, 6].includes(item.props().value))
+        .map(item => item.findComponent(IxCheckbox).find('input').setValue(true)),
+    )
+    await appendTrigger.trigger('click')
+
+    expect(onChange).toBeCalledWith([2, 3, 4, 5], [])
+    expect(
+      [2, 3, 4, 5].some(
+        value => sourceList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === value) > -1,
+      ),
+    ).toBeFalsy()
+    expect(
+      [2, 3, 4, 5].every(
+        value => targetList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === value) > -1,
+      ),
+    ).toBeTruthy()
+    expect(
+      [1, 6].every(
+        value => sourceList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === value) > -1,
+      ),
+    ).toBeTruthy()
+    expect(
+      [1, 6].some(
+        value => targetList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === value) > -1,
+      ),
+    ).toBeFalsy()
+
+    await Promise.all(
+      targetList
+        .findAllComponents(CheckableListItem)
+        .filter(item => [3, 4].includes(item.props().value))
+        .map(item => item.findComponent(IxCheckbox).find('input').setValue(true)),
+    )
+    await removeTrigger.trigger('click')
+
+    expect(onChange).toBeCalledWith([2, 5], [2, 3, 4, 5])
+    expect(
+      [2, 5].some(
+        value => sourceList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === value) > -1,
+      ),
+    ).toBeFalsy()
+    expect(
+      [1, 3, 4, 6].some(
+        value => targetList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === value) > -1,
+      ),
+    ).toBeFalsy()
+    expect(
+      [2, 5].every(
+        value => targetList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === value) > -1,
+      ),
+    ).toBeTruthy()
+    expect(
+      [1, 3, 4, 6].every(
+        value => sourceList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === value) > -1,
+      ),
+    ).toBeTruthy()
+
+    onChange.mockClear()
+    await Promise.all(
+      sourceList
+        .findAllComponents(CheckableListItem)
+        .filter(item => [13, 14].includes(item.props().value))
+        .map(item => item.findComponent(IxCheckbox).find('input').setValue(true)),
+    )
+    await wrapper.setProps({ disabled: true })
+    await appendTrigger.trigger('click')
+
+    expect(onChange).not.toBeCalled()
+    expect(
+      [13, 14].every(
+        value => sourceList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === value) > -1,
+      ),
+    ).toBeTruthy()
+    expect(
+      [13, 14].some(
+        value => targetList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === value) > -1,
+      ),
+    ).toBeFalsy()
+
+    onChange.mockClear()
+    await wrapper.setProps({ disabled: false })
+    await Promise.all(
+      targetList
+        .findAllComponents(CheckableListItem)
+        .filter(item => [2, 5].includes(item.props().value))
+        .map(item => item.findComponent(IxCheckbox).find('input').setValue(true)),
+    )
+    await wrapper.setProps({ disabled: true })
+    await removeTrigger.trigger('click')
+
+    expect(onChange).not.toBeCalled()
+    expect(
+      [2, 5].every(
+        value => targetList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === value) > -1,
+      ),
+    ).toBeTruthy()
+    expect(
+      [2, 5].some(
+        value => sourceList.findAllComponents(CheckableListItem).findIndex(item => item.props().value === value) > -1,
+      ),
+    ).toBeFalsy()
+  })
+
+  test('selectAll work', async () => {
+    const onSelectAll = jest.fn()
+    const wrapper = TransferMount({ props: { dataSource: mockedDataSource, onSelectAll } })
+
+    const [sourceList, targetList] = wrapper.findAllComponents(TransferList)
+    const sourceSelectAll = sourceList.findComponent(TransferListHeader).findComponent(IxCheckbox)
+    const targetSelectAll = targetList.findComponent(TransferListHeader).findComponent(IxCheckbox)
+    const [appendTrigger, removeTrigger] = wrapper.findComponent(TransferOperations).findAllComponents(IxButton)
+
+    await wrapper.setProps({ disabled: true })
+
+    await sourceSelectAll.find('input').setValue(true)
+    await appendTrigger.trigger('click')
+
+    expect(onSelectAll).not.toBeCalled()
+    expect(targetList.findAllComponents(CheckableListItem).map(item => item.props().value)).toEqual([])
+
+    await sourceSelectAll.find('input').setValue(false)
+    await wrapper.setProps({ disabled: false })
+
+    await sourceSelectAll.find('input').setValue(true)
+    expect(onSelectAll).toBeCalledWith(true, true)
+    await sourceSelectAll.find('input').setValue(false)
+    expect(onSelectAll).toBeCalledWith(true, false)
+    await sourceSelectAll.find('input').setValue(true)
+    await appendTrigger.trigger('click')
+
+    expect(sourceList.findAllComponents(CheckableListItem).map(item => item.props().value)).toEqual([1, 6, 12, 16])
+
+    onSelectAll.mockClear()
+    await wrapper.setProps({ disabled: true })
+
+    await targetSelectAll.find('input').setValue(true)
+    await removeTrigger.trigger('click')
+
+    expect(onSelectAll).not.toBeCalled()
+    expect(sourceList.findAllComponents(CheckableListItem).map(item => item.props().value)).toEqual([1, 6, 12, 16])
+
+    await targetSelectAll.find('input').setValue(false)
+    await wrapper.setProps({ disabled: false })
+
+    await targetSelectAll.find('input').setValue(true)
+    expect(onSelectAll).toBeCalledWith(false, true)
+    await targetSelectAll.find('input').setValue(false)
+    expect(onSelectAll).toBeCalledWith(false, false)
+    await targetSelectAll.find('input').setValue(true)
+    await removeTrigger.trigger('click')
+
+    expect(targetList.findAllComponents(CheckableListItem).map(item => item.props().value)).toEqual([])
+  })
+
+  test('clear work', async () => {
+    const onClear = jest.fn()
+    const onChange = jest.fn()
+    const wrapper = TransferMount({
+      props: { dataSource: mockedDataSource, value: [2, 3, 4, 5], disabled: true, onClear, 'onUpdate:value': onChange },
+    })
+    const clearBtn = wrapper.find('.ix-transfer-list-header-clear-icon')
+
+    await clearBtn.trigger('click')
+    expect(onClear).not.toBeCalled()
+    expect(onChange).not.toBeCalled()
+    expect(clearBtn.classes()).toContain('ix-transfer-list-header-clear-icon-disabled')
+
+    await wrapper.setProps({ disabled: false })
+    await clearBtn.trigger('click')
+    expect(onClear).toBeCalled()
+    expect(onChange).toBeCalledWith([])
+    expect(clearBtn.classes()).not.toContain('ix-transfer-list-header-clear-icon-disabled')
+  })
+
+  test('clearable work', async () => {
+    const wrapper = TransferMount({
+      props: { dataSource: mockedDataSource, clearable: false },
+    })
+
+    expect(wrapper.find('.ix-transfer-list-header-clear-icon').exists()).toBeFalsy()
+
+    await wrapper.setProps({ clearable: true })
+
+    expect(wrapper.find('.ix-transfer-list-header-clear-icon').exists()).toBeTruthy()
+  })
+
+  test('clearIcon work', async () => {
+    const wrapper = TransferMount({
+      props: { dataSource: mockedDataSource, clearIcon: 'up' },
+    })
+
+    expect(wrapper.find('.ix-transfer-list-header-clear-icon').find('.ix-icon-up').exists()).toBeTruthy()
+  })
+
+  test('pagination work', async () => {
+    const onPageChange = jest.fn()
+    const wrapper = TransferMount({
+      props: {
+        dataSource: Array.from(new Array(50)).map((_, idx) => ({
+          key: idx,
+          value: idx,
+          disabled: [1, 6, 12, 16].includes(idx),
+        })),
+        value: Array.from(new Array(25)).map((_, idx) => idx),
+        pagination: false,
+      },
+    })
+
+    const [sourceList, targetList] = wrapper.findAllComponents(TransferList)
+
+    expect(sourceList.findAllComponents(CheckableListItem).length).toBe(25)
+    expect(targetList.findAllComponents(CheckableListItem).length).toBe(25)
+
+    await wrapper.setProps({
+      pagination: {
+        pageIndex: [1, 1],
+        pageSize: [10, 10],
+      },
+    })
+
+    expect(sourceList.findAllComponents(CheckableListItem).length).toBe(10)
+    expect(targetList.findAllComponents(CheckableListItem).length).toBe(10)
+
+    await wrapper.setProps({
+      pagination: {
+        pageIndex: [3, 3],
+        pageSize: [10, 10],
+      },
+    })
+
+    expect(sourceList.findAllComponents(CheckableListItem).length).toBe(5)
+    expect(targetList.findAllComponents(CheckableListItem).length).toBe(5)
+
+    await wrapper.setProps({
+      pagination: {
+        pageIndex: [1, 1],
+        pageSize: [20, 20],
+      },
+    })
+
+    expect(sourceList.findAllComponents(CheckableListItem).length).toBe(20)
+    expect(targetList.findAllComponents(CheckableListItem).length).toBe(20)
+
+    await wrapper.setProps({
+      pagination: {
+        pageIndex: [1, 1],
+        pageSize: [10, 10],
+        onChange: onPageChange,
+      },
+    })
+
+    const [sourcePrev, , sourceNext] = sourceList.findAll('.ix-pagination-item')
+    const [targetPrev, , targetNext] = targetList.findAll('.ix-pagination-item')
+    await sourceNext.trigger('click')
+    expect(onPageChange).toBeCalledWith(true, 2, 10)
+
+    await sourcePrev.trigger('click')
+    expect(onPageChange).toBeCalledWith(true, 1, 10)
+
+    await targetNext.trigger('click')
+    expect(onPageChange).toBeCalledWith(false, 2, 10)
+
+    await targetPrev.trigger('click')
+    expect(onPageChange).toBeCalledWith(false, 1, 10)
+
+    onPageChange.mockClear()
+    await wrapper.setProps({
+      pagination: {
+        pageIndex: [1, 1],
+        pageSize: [10, 10],
+        onChange: onPageChange,
+      },
+      disabled: true,
+    })
+
+    await sourceNext.trigger('click')
+    await sourcePrev.trigger('click')
+    await targetNext.trigger('click')
+    await targetPrev.trigger('click')
+    expect(onPageChange).not.toBeCalled()
+  })
+
+  test('searchable work', async () => {
+    const onSearch = jest.fn()
+    const wrapper = TransferMount({
+      props: {
+        dataSource: mockedDataSource,
+        value: [1, 2, 3, 4, 5],
+        searchable: true,
+        searchFn(isSource, item, searchValue) {
+          return `${item.value}`.indexOf(searchValue) > -1
+        },
+        onSearch,
+      },
+    })
+
+    const [sourceList, targetList] = wrapper.findAllComponents(TransferList)
+
+    const sourceSearchInput = sourceList.findComponent(ɵInput).find('input')
+    await sourceSearchInput.setValue('9')
+    await sourceSearchInput.trigger('keydown.enter')
+    expect(onSearch).toBeCalledWith(true, '9')
+    expect(sourceList.findAllComponents(CheckableListItem).length).toBe(2)
+
+    const targetSearchInput = targetList.findComponent(ɵInput).find('input')
+    await targetSearchInput.setValue('2')
+    await targetSearchInput.trigger('keydown.enter')
+    expect(onSearch).toBeCalledWith(false, '2')
+    expect(targetList.findAllComponents(CheckableListItem).length).toBe(1)
+  })
+
+  test('transferBySelect work', async () => {
+    const onChange = jest.fn()
+    const wrapper = TransferMount({
+      props: { dataSource: mockedDataSource, mode: 'transferBySelect', 'onUpdate:value': onChange },
+    })
+
+    const [sourceList, targetList] = wrapper.findAllComponents(TransferList)
+    const triggerSelect = (num: number, checked: boolean) =>
+      sourceList
+        .findAllComponents(CheckableListItem)
+        .filter(item => item.props().value === num)[0]
+        .findComponent(IxCheckbox)
+        .find('input')
+        .setValue(checked)
+
+    await triggerSelect(1, true)
+    expect(onChange).not.toBeCalled()
+
+    await triggerSelect(2, true)
+    expect(onChange).toBeCalledWith([2])
+
+    await triggerSelect(3, true)
+    expect(onChange).toBeCalledWith([2, 3])
+
+    await triggerSelect(2, false)
+    expect(onChange).toBeCalledWith([3])
+
+    await targetList
+      .findAllComponents(CheckableListItem)
+      .filter(item => item.props().value === 3)[0]
+      .find('.ix-checkable-list-item-close-icon')
+      .trigger('click')
+    expect(onChange).toBeCalledWith([])
+  })
+
+  test('spin work', async () => {
+    const wrapper = TransferMount({ props: { spin: true } })
+    const [sourceList, targetList] = wrapper.findAllComponents(TransferList)
+
+    expect(sourceList.findComponent(IxSpin).exists()).toBeTruthy()
+    expect(targetList.findComponent(IxSpin).exists()).toBeTruthy()
+
+    await wrapper.setProps({ spin: { source: false, target: true } })
+
+    expect(sourceList.findComponent(IxSpin).props().spinning).toBe(false)
+    expect(targetList.findComponent(IxSpin).props().spinning).toBe(true)
+
+    await wrapper.setProps({ spin: { source: false, target: false } })
+
+    expect(sourceList.findComponent(IxSpin).props().spinning).toBe(false)
+    expect(targetList.findComponent(IxSpin).props().spinning).toBe(false)
+  })
+})
diff --git a/packages/components/transfer/__tests__/transferSlots.spec.ts b/packages/components/transfer/__tests__/transferSlots.spec.ts
new file mode 100644
index 000000000..53ed954e8
--- /dev/null
+++ b/packages/components/transfer/__tests__/transferSlots.spec.ts
@@ -0,0 +1,236 @@
+import { MountingOptions, mount } from '@vue/test-utils'
+import { h } from 'vue'
+
+import CheckableListItem from '@idux/components/_private/checkable-list/src/CheckableListItem'
+
+import Transfer from '../src/Transfer'
+import TransferList from '../src/list/TransferList'
+import { TransferListSlotParams, TransferOperationsSlotParams, TransferProps } from '../src/types'
+
+const mockedDataSource = Array.from(new Array(20)).map((_, idx) => ({
+  key: idx,
+  value: idx,
+  disabled: [1, 6, 12, 16].includes(idx),
+}))
+
+describe('Transfer', () => {
+  const TransferMount = (options?: MountingOptions<Partial<TransferProps>>) =>
+    mount(Transfer, { ...(options as MountingOptions<TransferProps>) })
+
+  const testSlot = async (slot: string) => {
+    const getCls = (isSource: boolean, cls: string) => `${isSource ? 'source' : 'target'}-${cls}`
+    const selectAll = true
+    let selectedKeys: number[] = []
+    let searchValue = ''
+    const wrapper = TransferMount({
+      props: {
+        dataSource: mockedDataSource,
+        searchable: true,
+        searchFn(isSource, item, searchValue) {
+          return `${item.value}`.indexOf(searchValue) > -1
+        },
+      },
+      slots: {
+        [slot]: (params: TransferListSlotParams) =>
+          h('div', [
+            h('span', { class: getCls(params.isSource, 'data') }, params.data.length),
+            h('span', { class: getCls(params.isSource, 'filteredData') }, params.filteredData.length),
+            h('span', { class: getCls(params.isSource, 'paginatedData') }, params.paginatedData.length),
+            h('span', { class: getCls(params.isSource, 'dataSource') }, params.dataSource.length),
+            h('span', { class: getCls(params.isSource, 'dataKeyMap') }, params.dataKeyMap.size),
+            h('span', { class: getCls(params.isSource, 'filteredDataSource') }, params.filteredDataSource.length),
+            h('span', { class: getCls(params.isSource, 'paginatedDataSource') }, params.paginatedDataSource.length),
+            h('span', { class: getCls(params.isSource, 'targetKeySet') }, params.targetKeySet.size),
+            h('span', { class: getCls(params.isSource, 'selectedKeys') }, params.selectedKeys.length),
+            h('span', { class: getCls(params.isSource, 'selectedKeySet') }, params.selectedKeySet.size),
+            h('span', { class: getCls(params.isSource, 'disabledKeys') }, params.disabledKeys.size),
+            h('span', { class: getCls(params.isSource, 'selectAllDisabled') }, params.selectAllDisabled),
+            h(
+              'span',
+              { class: getCls(params.isSource, 'selectAllStatus') },
+              `${params.selectAllStatus.checked}-${params.selectAllStatus.indeterminate}`,
+            ),
+            h('span', { class: getCls(params.isSource, 'showSelectAll') }, params.showSelectAll),
+            h('span', { class: getCls(params.isSource, 'searchable') }, params.searchable),
+            h('span', {
+              class: getCls(params.isSource, 'handleSelectChange'),
+              onClick: () => params.handleSelectChange(selectedKeys),
+            }),
+            h('span', { class: getCls(params.isSource, 'selectAll'), onClick: () => params.selectAll(selectAll) }),
+            h('span', { class: getCls(params.isSource, 'searchValue') }, params.searchValue),
+            h('span', {
+              class: getCls(params.isSource, 'handleSearchChange'),
+              onClick: () => params.handleSearchChange(searchValue),
+            }),
+          ]),
+        operations: (params: TransferOperationsSlotParams) =>
+          h('div', [
+            h('span', { class: 'triggerAppend', onClick: () => params.triggerAppend() }),
+            h('span', { class: 'triggerRemove', onClick: () => params.triggerRemove() }),
+            h('span', {
+              class: 'triggerAppendAll',
+              onClick: () => params.triggerAppendAll(),
+            }),
+            h('span', { class: 'triggerClear', onClick: () => params.triggerClear() }),
+          ]),
+      },
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+
+    expect(wrapper.find('.source-data').text()).toBe('20')
+    expect(wrapper.find('.source-filteredData').text()).toBe('20')
+    expect(wrapper.find('.source-paginatedData').text()).toBe('20')
+    expect(wrapper.find('.source-dataSource').text()).toBe('20')
+    expect(wrapper.find('.source-dataKeyMap').text()).toBe('20')
+    expect(wrapper.find('.source-filteredDataSource').text()).toBe('20')
+    expect(wrapper.find('.source-paginatedDataSource').text()).toBe('20')
+    expect(wrapper.find('.source-targetKeySet').text()).toBe('0')
+    expect(wrapper.find('.source-selectedKeys').text()).toBe('0')
+    expect(wrapper.find('.source-selectedKeySet').text()).toBe('0')
+    expect(wrapper.find('.source-disabledKeys').text()).toBe('4')
+    expect(wrapper.find('.source-selectAllDisabled').text()).toBe('false')
+    expect(wrapper.find('.source-selectAllStatus').text()).toBe('false-false')
+    expect(wrapper.find('.source-showSelectAll').text()).toBe('true')
+    expect(wrapper.find('.source-searchable').text()).toBe('true')
+    expect(wrapper.find('.source-searchValue').text()).toBe('')
+
+    expect(wrapper.find('.target-data').text()).toBe('0')
+    expect(wrapper.find('.target-filteredData').text()).toBe('0')
+    expect(wrapper.find('.target-paginatedData').text()).toBe('0')
+    expect(wrapper.find('.target-dataSource').text()).toBe('20')
+    expect(wrapper.find('.target-dataKeyMap').text()).toBe('20')
+    expect(wrapper.find('.target-filteredDataSource').text()).toBe('20')
+    expect(wrapper.find('.target-paginatedDataSource').text()).toBe('20')
+    expect(wrapper.find('.target-targetKeySet').text()).toBe('0')
+    expect(wrapper.find('.target-selectedKeys').text()).toBe('0')
+    expect(wrapper.find('.target-selectedKeySet').text()).toBe('0')
+    expect(wrapper.find('.target-disabledKeys').text()).toBe('0')
+    expect(wrapper.find('.target-selectAllDisabled').text()).toBe('true')
+    expect(wrapper.find('.target-selectAllStatus').text()).toBe('false-false')
+    expect(wrapper.find('.target-showSelectAll').text()).toBe('true')
+    expect(wrapper.find('.target-searchable').text()).toBe('true')
+    expect(wrapper.find('.target-searchValue').text()).toBe('')
+
+    await wrapper.find('.source-selectAll').trigger('click')
+    expect(wrapper.find('.source-selectedKeys').text()).toBe('16')
+    expect(wrapper.find('.source-selectedKeySet').text()).toBe('16')
+
+    selectedKeys = [7, 8, 9, 10, 11, 12]
+    await wrapper.find('.source-handleSelectChange').trigger('click')
+    expect(wrapper.find('.source-selectedKeys').text()).toBe('5')
+    expect(wrapper.find('.source-selectedKeySet').text()).toBe('5')
+
+    await wrapper.find('.triggerAppend').trigger('click')
+    expect(wrapper.find('.source-selectedKeys').text()).toBe('0')
+    expect(wrapper.find('.source-selectedKeySet').text()).toBe('0')
+    expect(wrapper.find('.source-data').text()).toBe('15')
+    expect(wrapper.find('.target-data').text()).toBe('5')
+
+    await wrapper.find('.triggerAppendAll').trigger('click')
+    expect(wrapper.find('.source-data').text()).toBe('4')
+    expect(wrapper.find('.target-data').text()).toBe('16')
+
+    searchValue = '9'
+    await wrapper.find('.target-handleSearchChange').trigger('click')
+    expect(wrapper.find('.target-searchValue').text()).toBe('9')
+    expect(wrapper.find('.target-filteredData').text()).toBe('2')
+
+    await wrapper.find('.target-selectAll').trigger('click')
+    expect(wrapper.find('.target-selectedKeys').text()).toBe('16')
+    expect(wrapper.find('.target-selectedKeySet').text()).toBe('16')
+
+    selectedKeys = [7, 8, 9, 10, 11]
+    await wrapper.find('.target-handleSelectChange').trigger('click')
+    expect(wrapper.find('.target-selectedKeys').text()).toBe('5')
+    expect(wrapper.find('.target-selectedKeySet').text()).toBe('5')
+
+    await wrapper.find('.triggerRemove').trigger('click')
+    expect(wrapper.find('.target-selectedKeys').text()).toBe('0')
+    expect(wrapper.find('.target-selectedKeySet').text()).toBe('0')
+    expect(wrapper.find('.source-data').text()).toBe('9')
+    expect(wrapper.find('.target-data').text()).toBe('11')
+
+    await wrapper.find('.triggerClear').trigger('click')
+    expect(wrapper.find('.source-data').text()).toBe('20')
+    expect(wrapper.find('.target-data').text()).toBe('0')
+
+    searchValue = '9'
+    await wrapper.find('.source-handleSearchChange').trigger('click')
+    expect(wrapper.find('.source-searchValue').text()).toBe('9')
+    expect(wrapper.find('.source-filteredData').text()).toBe('2')
+  }
+
+  test('default slot work', async () => {
+    await testSlot('default')
+  })
+
+  test('footer slot work', async () => {
+    await testSlot('footer')
+  })
+
+  test('label slot work', async () => {
+    const wrapper = TransferMount({
+      props: { dataSource: mockedDataSource },
+      slots: {
+        label: () => h('div', { class: 'custom-label-slot-test' }),
+      },
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+    expect(
+      wrapper.findAllComponents(CheckableListItem).every(item => item.find('.custom-label-slot-test').exists()),
+    ).toBeTruthy()
+  })
+
+  test('headerLabel slot work', async () => {
+    const wrapper = TransferMount({
+      props: { dataSource: mockedDataSource },
+      slots: {
+        headerLabel: ({ data, isSource }) =>
+          h('div', { class: `custom-header-label-slot-test-${isSource ? 'source' : 'target'}` }, data.length),
+      },
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+    expect(wrapper.find('.custom-header-label-slot-test-source').text()).toBe('20')
+    expect(wrapper.find('.custom-header-label-slot-test-target').text()).toBe('0')
+  })
+
+  test('headerSuffix slot work', async () => {
+    const wrapper = TransferMount({
+      props: { dataSource: mockedDataSource },
+      slots: {
+        headerSuffix: ({ isSource }) =>
+          h('div', { class: `custom-header-suffix-slot-test-${isSource ? 'source' : 'target'}` }),
+      },
+    })
+
+    expect(wrapper.find('.custom-header-suffix-slot-test-source').exists()).toBeTruthy()
+    expect(wrapper.find('.custom-header-suffix-slot-test-target').exists()).toBeTruthy()
+  })
+
+  test('empty slot work', async () => {
+    const wrapper = TransferMount({
+      props: { dataSource: mockedDataSource },
+      slots: {
+        empty: () => h('div', { class: 'custom-empty-slot-test' }),
+      },
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+    expect(wrapper.findAllComponents(TransferList)[1].find('.custom-empty-slot-test').exists()).toBeTruthy()
+  })
+
+  test('clearIcon slot work', async () => {
+    const wrapper = TransferMount({
+      props: { dataSource: mockedDataSource },
+      slots: {
+        clearIcon: () => h('div', { class: 'custom-clear-icon-slot-test' }),
+      },
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+    expect(wrapper.findAllComponents(TransferList)[1].find('.custom-clear-icon-slot-test').exists()).toBeTruthy()
+  })
+})
diff --git a/packages/components/transfer/demo/Basic.md b/packages/components/transfer/demo/Basic.md
new file mode 100644
index 000000000..0ddf241aa
--- /dev/null
+++ b/packages/components/transfer/demo/Basic.md
@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh: 基本使用
+  en: Basic usage
+---
+
+## zh
+
+最简单的用法。
+
+## en
+
+The simplest usage.
diff --git a/packages/components/transfer/demo/Basic.vue b/packages/components/transfer/demo/Basic.vue
new file mode 100644
index 000000000..f1b97b987
--- /dev/null
+++ b/packages/components/transfer/demo/Basic.vue
@@ -0,0 +1,30 @@
+<template>
+  <IxSpace vertical>
+    <IxTransfer v-model:value="targetKeys" :data-source="dataSource" :disabled="disabled" />
+    <IxSpace align="center">
+      <label>disabled: </label>
+      <IxSwitch v-model:checked="disabled" />
+    </IxSpace>
+  </IxSpace>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Data {
+  key: number
+  value: number
+  label: string
+}
+
+const targetKeys = ref<number[]>([])
+
+const dataSource: Data[] = Array.from(new Array(20)).map((_, idx) => ({
+  key: idx,
+  value: idx,
+  label: 'Option' + idx,
+  disabled: [1, 6].includes(idx),
+}))
+
+const disabled = ref(false)
+</script>
diff --git a/packages/components/transfer/demo/CustomHeaderFooter.md b/packages/components/transfer/demo/CustomHeaderFooter.md
new file mode 100644
index 000000000..36b0be390
--- /dev/null
+++ b/packages/components/transfer/demo/CustomHeaderFooter.md
@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+  zh: 自定义header、footer
+  en: Custom header and footer
+---
+
+## zh
+
+通过 `headerLabel`, `headerSuffix` 和 `footer` 插槽自定义 header 和 footer。
+
+## en
+
+Customize header and footer via `header` and `footer` slot.
diff --git a/packages/components/transfer/demo/CustomHeaderFooter.vue b/packages/components/transfer/demo/CustomHeaderFooter.vue
new file mode 100644
index 000000000..f8ccedb11
--- /dev/null
+++ b/packages/components/transfer/demo/CustomHeaderFooter.vue
@@ -0,0 +1,36 @@
+<template>
+  <IxTransfer v-model:value="targetKeys" :data-source="dataSource" :disabled="disabled" show-list-footer>
+    <template #headerLabel>
+      <span> Custom header </span>
+    </template>
+    <template #headerSuffix>
+      <IxIcon name="plus" :onClick="handleSuffixClick" />
+    </template>
+    <template #footer> Custom footer </template>
+  </IxTransfer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Data {
+  key: number
+  value: number
+  label: string
+}
+
+const targetKeys = ref<number[]>(Array.from(new Array(10)).map((_, idx) => idx))
+
+const dataSource: Data[] = Array.from(new Array(20)).map((_, idx) => ({
+  key: idx,
+  value: idx,
+  label: 'Option' + idx,
+  disabled: [1, 6, 12, 16].includes(idx),
+}))
+
+const disabled = ref(false)
+
+const handleSuffixClick = (evt: Event) => {
+  console.log(evt)
+}
+</script>
diff --git a/packages/components/transfer/demo/CustomLabel.md b/packages/components/transfer/demo/CustomLabel.md
new file mode 100644
index 000000000..2464c212d
--- /dev/null
+++ b/packages/components/transfer/demo/CustomLabel.md
@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh: 自定义label
+  en: Custom label
+---
+
+## zh
+
+通过 `label` 插槽自定义label显示。
+
+## en
+
+Customize label via `label` slot.
diff --git a/packages/components/transfer/demo/CustomLabel.vue b/packages/components/transfer/demo/CustomLabel.vue
new file mode 100644
index 000000000..b2472b84a
--- /dev/null
+++ b/packages/components/transfer/demo/CustomLabel.vue
@@ -0,0 +1,31 @@
+<template>
+  <IxTransfer v-model:value="selectedKeys" :data-source="dataSource" :disabled="disabled">
+    <template #label="item">
+      <span style="display: flex; align-items: center">
+        <span style="margin-right: 8px">{{ item.label }}</span>
+        <IxIcon name="desktop" />
+      </span>
+    </template>
+  </IxTransfer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Data {
+  key: number
+  value: number
+  label: string
+}
+
+const selectedKeys = ref<number[]>(Array.from(new Array(10)).map((_, idx) => idx))
+
+const dataSource: Data[] = Array.from(new Array(20)).map((_, idx) => ({
+  key: idx,
+  value: idx,
+  label: 'Option' + idx,
+  disabled: [1, 6, 12, 16].includes(idx),
+}))
+
+const disabled = ref(false)
+</script>
diff --git a/packages/components/transfer/demo/CustomListBody.md b/packages/components/transfer/demo/CustomListBody.md
new file mode 100644
index 000000000..c07412332
--- /dev/null
+++ b/packages/components/transfer/demo/CustomListBody.md
@@ -0,0 +1,14 @@
+---
+order: 9
+title:
+  zh: 自定义列表内容
+  en: Custom list body
+---
+
+## zh
+
+通过默认插槽自定义列表内容。
+
+## en
+
+Customize list body via `default` slot.
diff --git a/packages/components/transfer/demo/CustomListBody.vue b/packages/components/transfer/demo/CustomListBody.vue
new file mode 100644
index 000000000..89239f6e2
--- /dev/null
+++ b/packages/components/transfer/demo/CustomListBody.vue
@@ -0,0 +1,92 @@
+<template>
+  <IxTransfer
+    v-model:value="targetKeys"
+    class="transer-demo-custom-transfer-body__transfer"
+    :data-source="dataSource"
+    :disabled="disabled"
+    :show-select-all="false"
+  >
+    <template #default="params">
+      <IxTable
+        :selected-row-keys="params.selectedKeys"
+        :columns="getColumns(params)"
+        :data-source="params.paginatedData"
+        :scroll="{ height: 300, fullHeight: true }"
+        :pagination="params.pagination"
+      />
+    </template>
+    <template #footer />
+  </IxTransfer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { TableColumn, TableColumnSelectable } from '@idux/components/table'
+import { TransferListSlotParams } from '@idux/components/transfer'
+
+interface Data {
+  key: number
+  disabled: boolean
+  name: string
+  age: number
+  address: string
+}
+
+const getColumns = (params: TransferListSlotParams): TableColumn<Data>[] => {
+  const selectableColumn: TableColumnSelectable = {
+    type: 'selectable',
+    disabled: record => record.disabled,
+    multiple: true,
+    trigger: 'click',
+    onChange: selectedKeys => params.handleSelectChange(selectedKeys),
+  }
+  if (!params.isSource) {
+    return [
+      selectableColumn,
+      {
+        title: 'Name',
+        dataKey: 'name',
+      },
+    ]
+  }
+
+  return [
+    selectableColumn,
+    {
+      title: 'Name',
+      dataKey: 'name',
+    },
+    {
+      title: 'Age',
+      dataKey: 'age',
+    },
+    {
+      title: 'Address',
+      dataKey: 'address',
+    },
+  ]
+}
+
+const targetKeys = ref<number[]>(Array.from(new Array(10)).map((_, idx) => idx))
+
+const dataSource: Data[] = Array.from(new Array(20)).map((_, idx) => ({
+  key: idx,
+  disabled: [1, 6, 12, 16].includes(idx),
+  name: 'Candidate' + idx,
+  age: idx,
+  address: 'London No.1 Lake Park',
+}))
+
+const disabled = ref(false)
+</script>
+<style lang="less">
+.transer-demo-custom-transfer-body__transfer {
+  .ix-transfer-list {
+    height: auto;
+  }
+  .ix-transfer-list-source {
+    width: 500px;
+  }
+}
+</style>
diff --git a/packages/components/transfer/demo/CustomOperations.md b/packages/components/transfer/demo/CustomOperations.md
new file mode 100644
index 000000000..0c8def0fe
--- /dev/null
+++ b/packages/components/transfer/demo/CustomOperations.md
@@ -0,0 +1,14 @@
+---
+order: 8
+title:
+  zh: 自定义操作按钮
+  en: Custom Operations
+---
+
+## zh
+
+通过 `operations` 插槽自定义操作按钮。
+
+## en
+
+Customize operation buttons via `operations` slot.
diff --git a/packages/components/transfer/demo/CustomOperations.vue b/packages/components/transfer/demo/CustomOperations.vue
new file mode 100644
index 000000000..171770644
--- /dev/null
+++ b/packages/components/transfer/demo/CustomOperations.vue
@@ -0,0 +1,82 @@
+<template>
+  <IxTransfer v-model:value="targetKeys" :data-source="dataSource" :disabled="disabled">
+    <template
+      #operations="{
+        triggerAppend,
+        triggerRemove,
+        triggerAppendAll,
+        triggerClear,
+        appendDisabled,
+        removeDisabled,
+        appendAllDisabled,
+        clearDisabled,
+      }"
+    >
+      <div class="demo-transfer-custom-operations__operations">
+        <IxButton
+          class="demo-transfer-custom-operations__operations-btn"
+          :disabled="appendAllDisabled"
+          :onClick="() => triggerAppendAll()"
+          >all</IxButton
+        >
+        <IxButton
+          class="demo-transfer-custom-operations__operations-btn"
+          :disabled="appendDisabled"
+          :onClick="() => triggerAppend()"
+          >append</IxButton
+        >
+        <IxButton
+          class="demo-transfer-custom-operations__operations-btn"
+          :disabled="removeDisabled"
+          :onClick="() => triggerRemove()"
+          >remove</IxButton
+        >
+        <IxButton
+          class="demo-transfer-custom-operations__operations-btn"
+          :disabled="clearDisabled"
+          :onClick="() => triggerClear()"
+          >clear</IxButton
+        >
+      </div>
+    </template>
+  </IxTransfer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Data {
+  key: number
+  value: number
+  label: string
+}
+
+const targetKeys = ref<number[]>(Array.from(new Array(10)).map((_, idx) => idx))
+
+const dataSource: Data[] = Array.from(new Array(20)).map((_, idx) => ({
+  key: idx,
+  value: idx,
+  label: 'Option' + idx,
+  disabled: [1, 6, 12, 16].includes(idx),
+}))
+
+const disabled = ref(false)
+</script>
+<style lang="less">
+.demo-transfer-custom-operations__operations {
+  height: 100%;
+  padding: 0 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  &-btn {
+    width: 80px;
+
+    & + & {
+      margin-top: 8px;
+    }
+  }
+}
+</style>
diff --git a/packages/components/transfer/demo/NoOperations.md b/packages/components/transfer/demo/NoOperations.md
new file mode 100644
index 000000000..6ca3e27ca
--- /dev/null
+++ b/packages/components/transfer/demo/NoOperations.md
@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh: 不展示箭头操作按钮
+  en: No operations
+---
+
+## zh
+
+不展示箭头操作按钮
+
+## en
+
+Hide arrow operations.
diff --git a/packages/components/transfer/demo/NoOperations.vue b/packages/components/transfer/demo/NoOperations.vue
new file mode 100644
index 000000000..3c4adaf9b
--- /dev/null
+++ b/packages/components/transfer/demo/NoOperations.vue
@@ -0,0 +1,30 @@
+<template>
+  <IxSpace vertical>
+    <IxTransfer v-model:value="selectedKeys" :data-source="dataSource" :disabled="disabled" mode="transferBySelect" />
+    <IxSpace align="center">
+      <label>disabled:</label>
+      <IxSwitch v-model:checked="disabled" />
+    </IxSpace>
+  </IxSpace>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Data {
+  key: number
+  value: number
+  label: string
+}
+
+const selectedKeys = ref<number[]>(Array.from(new Array(10)).map((_, idx) => idx))
+
+const dataSource: Data[] = Array.from(new Array(20)).map((_, idx) => ({
+  key: idx,
+  value: idx,
+  label: 'Option' + idx,
+  disabled: [1, 6, 12, 16].includes(idx),
+}))
+
+const disabled = ref(false)
+</script>
diff --git a/packages/components/transfer/demo/Pagination.md b/packages/components/transfer/demo/Pagination.md
new file mode 100644
index 000000000..e04b20700
--- /dev/null
+++ b/packages/components/transfer/demo/Pagination.md
@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh: 分页
+  en: Pagination
+---
+
+## zh
+
+通过 `pagination` 控制穿梭框源数据列表与目标数据列表的分页功能
+
+## en
+
+Control pagination of source list and target list of transfer by setting `pagination`
diff --git a/packages/components/transfer/demo/Pagination.vue b/packages/components/transfer/demo/Pagination.vue
new file mode 100644
index 000000000..196967b44
--- /dev/null
+++ b/packages/components/transfer/demo/Pagination.vue
@@ -0,0 +1,34 @@
+<template>
+  <IxTransfer v-model:value="selectedKeys" :data-source="dataSource" :pagination="pagination" />
+</template>
+
+<script setup lang="ts">
+import type { TransferPaginationType } from '@idux/components/transfer'
+
+import { computed, ref } from 'vue'
+
+interface Data {
+  key: number
+  value: number
+  label: string
+}
+
+const selectedKeys = ref<number[]>(Array.from(new Array(50)).map((_, idx) => idx))
+
+const dataSource: Data[] = Array.from(new Array(100)).map((_, idx) => ({
+  key: idx,
+  value: idx,
+  label: 'Option' + idx,
+  disabled: [1, 6, 12, 16].includes(idx),
+}))
+
+const sourcePageIndex = ref(1)
+const targetPageIndex = ref(1)
+const pagination = computed<TransferPaginationType>(() => ({
+  pageIndex: [sourcePageIndex.value, targetPageIndex.value],
+  pageSize: [10, 10],
+  onChange(isSource, pageIndex) {
+    isSource ? (sourcePageIndex.value = pageIndex) : (targetPageIndex.value = pageIndex)
+  },
+}))
+</script>
diff --git a/packages/components/transfer/demo/Remote.md b/packages/components/transfer/demo/Remote.md
new file mode 100644
index 000000000..f4afba98b
--- /dev/null
+++ b/packages/components/transfer/demo/Remote.md
@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh: 远程数据加载
+  en: Remote
+---
+
+## zh
+
+远程数据加载
+
+## en
+
+Remote
diff --git a/packages/components/transfer/demo/Remote.vue b/packages/components/transfer/demo/Remote.vue
new file mode 100644
index 000000000..12a08a4e4
--- /dev/null
+++ b/packages/components/transfer/demo/Remote.vue
@@ -0,0 +1,76 @@
+<template>
+  <IxTransfer
+    v-model:value="selectedKeys"
+    :data-source="dataSource"
+    :searchValue="searchValue"
+    :pagination="pagination"
+    :spin="spin"
+    :searchable="{ source: true, target: false }"
+    mode="transferBySelect"
+    :on-search="handleSearchChange"
+  >
+    <template #label="item">{{ item.label ?? 'Option' + item.key }}</template>
+  </IxTransfer>
+</template>
+
+<script setup lang="ts">
+import type { TransferPaginationType } from '@idux/components/transfer'
+
+import { computed, onMounted, ref } from 'vue'
+
+interface Data {
+  key: number
+  value: number
+  label: string
+}
+
+const allData = Array.from(new Array(1000)).map((_, idx) => ({
+  key: idx,
+  value: idx,
+  label: 'Option' + idx,
+}))
+
+const selectedKeys = ref<number[]>(Array.from(new Array(50)).map((_, idx) => idx))
+
+const spin = ref(false)
+const searchValue = ref<string | undefined>()
+
+const dataSource = ref<Data[]>([])
+const filteredData = ref<Data[]>([])
+
+const sourcePageIndex = ref(1)
+const pagination = computed<TransferPaginationType>(() => ({
+  pageIndex: sourcePageIndex.value,
+  pageSize: [20, 20],
+  total: filteredData.value.length,
+  onChange(isSource, pageIndex) {
+    if (!isSource) {
+      return
+    }
+    sourcePageIndex.value = pageIndex
+    loadSourceData()
+  },
+}))
+
+const loadSourceData = () => {
+  spin.value = true
+  setTimeout(() => {
+    filteredData.value = allData.filter(data => !searchValue.value || data.label.indexOf(searchValue.value) > -1)
+    dataSource.value = filteredData.value.slice((sourcePageIndex.value - 1) * 20, sourcePageIndex.value * 20)
+    spin.value = false
+  }, 1500)
+}
+
+const handleSearchChange = (isSource: boolean, value: string | undefined) => {
+  if (!isSource) {
+    return
+  }
+
+  searchValue.value = value
+  loadSourceData()
+}
+
+onMounted(() => {
+  loadSourceData()
+})
+</script>
diff --git a/packages/components/transfer/demo/Searchable.md b/packages/components/transfer/demo/Searchable.md
new file mode 100644
index 000000000..02e64e82a
--- /dev/null
+++ b/packages/components/transfer/demo/Searchable.md
@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh: 可搜索
+  en: Searchable
+---
+
+## zh
+
+通过设置 `searchable`, `searchFn`、`searchValue` 来控制穿梭框数据的搜索
+
+## en
+
+Control search functionality of transfer via props `searchable`, `searchFn`, `searchValue`
diff --git a/packages/components/transfer/demo/Searchable.vue b/packages/components/transfer/demo/Searchable.vue
new file mode 100644
index 000000000..685a4b416
--- /dev/null
+++ b/packages/components/transfer/demo/Searchable.vue
@@ -0,0 +1,26 @@
+<template>
+  <IxTransfer v-model:value="selectedKeys" :data-source="dataSource" searchable :search-fn="searchFn" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Data {
+  key: number
+  value: number
+  label: string
+}
+
+const selectedKeys = ref<number[]>(Array.from(new Array(10)).map((_, idx) => idx))
+
+const dataSource: Data[] = Array.from(new Array(20)).map((_, idx) => ({
+  key: idx,
+  value: idx,
+  label: 'Option' + idx,
+  disabled: [1, 6, 12, 16].includes(idx),
+}))
+
+const searchFn = (_: boolean, item: unknown, searchValue: string | undefined) => {
+  return !searchValue || (item as Data).label.indexOf(searchValue) > -1
+}
+</script>
diff --git a/packages/components/transfer/demo/VirtualScroll.md b/packages/components/transfer/demo/VirtualScroll.md
new file mode 100644
index 000000000..b9b4872cb
--- /dev/null
+++ b/packages/components/transfer/demo/VirtualScroll.md
@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh: 虚拟滚动
+  en: Virtual scroll
+---
+
+## zh
+
+虚拟滚动
+
+## en
+
+Virtual scroll
diff --git a/packages/components/transfer/demo/VirtualScroll.vue b/packages/components/transfer/demo/VirtualScroll.vue
new file mode 100644
index 000000000..dc0dcbf11
--- /dev/null
+++ b/packages/components/transfer/demo/VirtualScroll.vue
@@ -0,0 +1,49 @@
+<template>
+  <IxSpace vertical>
+    <IxTransfer
+      ref="transferRef"
+      v-model:value="selectedKeys"
+      :data-source="dataSource"
+      virtual
+      :scroll="{ height: 300, fullHeight: false }"
+    />
+    <IxSpace>
+      <IxButton :onClick="handleSourceScrollTo">SourceScrollTo</IxButton>
+      <IxInputNumber v-model:value="sourceScrollToIdx" />
+      <IxButton :onClick="handleTargetScrollTo">TargetScrollTo</IxButton>
+      <IxInputNumber v-model:value="targetScrollToIdx" />
+    </IxSpace>
+  </IxSpace>
+</template>
+
+<script setup lang="ts">
+import type { TransferInstance } from '@idux/components/transfer'
+
+import { ref } from 'vue'
+
+interface Data {
+  key: number
+  value: number
+  label: string
+}
+
+const selectedKeys = ref<number[]>(Array.from(new Array(1000)).map((_, idx) => idx))
+
+const dataSource: Data[] = Array.from(new Array(2000)).map((_, idx) => ({
+  key: idx,
+  value: idx,
+  label: 'Option' + idx,
+  disabled: [1, 6, 12, 16, 1001, 1006, 1012, 1016].includes(idx),
+}))
+
+const transferRef = ref<TransferInstance>()
+const sourceScrollToIdx = ref(0)
+const targetScrollToIdx = ref(0)
+
+const handleSourceScrollTo = () => {
+  transferRef.value?.scrollTo({ index: sourceScrollToIdx.value }, true)
+}
+const handleTargetScrollTo = () => {
+  transferRef.value?.scrollTo({ index: targetScrollToIdx.value }, false)
+}
+</script>
diff --git a/packages/components/transfer/docs/Design.en.md b/packages/components/transfer/docs/Design.en.md
new file mode 100644
index 000000000..d1e713d5e
--- /dev/null
+++ b/packages/components/transfer/docs/Design.en.md
@@ -0,0 +1,3 @@
+## Description
+
+## Usage scenarios
diff --git a/packages/components/transfer/docs/Design.zh.md b/packages/components/transfer/docs/Design.zh.md
new file mode 100644
index 000000000..933801767
--- /dev/null
+++ b/packages/components/transfer/docs/Design.zh.md
@@ -0,0 +1,3 @@
+## 组件定义
+
+## 使用场景
diff --git a/packages/components/transfer/docs/Index.en.md b/packages/components/transfer/docs/Index.en.md
new file mode 100644
index 000000000..69320c7d0
--- /dev/null
+++ b/packages/components/transfer/docs/Index.en.md
@@ -0,0 +1,29 @@
+---
+category: components
+type: Data Entry
+order: 0
+title: Transfer
+subtitle:
+---
+
+## API
+
+### IxTransfer
+
+#### TransferProps
+
+| Name | Description | Type | Default | Global Config | Remark |
+| --- | --- | --- | --- | --- | --- |
+| - | - | - | - | ✅ | - |
+
+#### TransferSlots
+
+| Name | Description | Parameter Type | Remark |
+| --- | --- | --- | --- |
+| - | - | - | - |
+
+#### TransferMethods
+
+| Name | Description | Parameter Type | Remark |
+| --- | --- | --- | --- |
+| - | - | - | - |
diff --git a/packages/components/transfer/docs/Index.zh.md b/packages/components/transfer/docs/Index.zh.md
new file mode 100644
index 000000000..ee75ed62f
--- /dev/null
+++ b/packages/components/transfer/docs/Index.zh.md
@@ -0,0 +1,178 @@
+---
+category: components
+type: 数据录入
+order: 0
+title: Transfer
+subtitle: 穿梭框
+---
+
+## API
+
+### 数据说明
+
+#### TransferData
+
+穿梭框源数据类型
+
+```ts
+export interface TransferData extends Record<VKey, any> {
+  key?: VKey
+  label?: string
+  disabled?: boolean
+  additional?: {
+    class?: any
+    style?: any
+    [key: string]: unknown
+  }
+}
+```
+
+### IxTransfer
+
+#### TransferProps
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `dataSource` | 源数据数组 | `TransferData[]` | `[]` | - | - |
+| `v-model:value` | 已选数据数组 | `VKey[]` | - | - | - |
+| `v-model:sourceSelectedKeys` | 源数据列表勾选的keys | `VKey[]` | - | - | - |
+| `v-model:targetSelectedKeys` | 目标数据列表勾选的keys | `VKey[]` | - | - | - |
+| `disabled` | 是否禁用穿梭框 | `boolean` | `false` | - | - |
+| `getKey` | 数据项 `key` 的取值 | `string \| (item: unknown) => string \| number` | - | - | 默认取数据的 `key` 属性 |
+| `virtual` | 是否开启虚拟滚动 | `boolean` | `false` | - | 需要设置 `scroll.height` |
+| `scroll` | 是否开启虚拟滚动 | `TransferScroll` | - | 仅使用默认列表并开启 `virtual` 下可用 |
+| `searchable` | 数据列表是否可搜索 | `boolean \| { source: boolean, target: boolean }` | `false` | ✅ | 仅使用默认列表头部时可用 |
+| `searchFn` | 搜索的判断函数 | `SearchFn` | - | - |
+| `pagination` | 数据列表分页配置 | `boolean \| TransferPaginationType` | `false` | ✅ | 仅使用默认列表底部时可用 |
+| `transferBySelect` | 是否通过源数据的勾选触发穿梭 | `boolean` | `false` | ✅ | 开启后默认不展示操作按钮 |
+| `showSelectAll` | 是否展示全选框 | `boolean` | `true` | ✅ | - |
+| `spin` | 数据列表的加载状态 | `boolean \| { source: boolean, target: boolean }` | `false` | - | - |
+| `empty` | 空状态的配置 | `string \| EmptyProps` | - | - | - |
+| `clearable` | 是否可清除 | `boolean` | `true` | ✅ | - |
+| `clearIcon` | 清除图标 | `string \| #clearIcon` | `clear` | ✅ | - |
+| `onChange` | 已选数据改变回调函数 | `(keys: VKey[], oldKeys: Vkey[]) => void` | - | - | - |
+| `onScroll` | 数据列表滚动事件 | `(isSource: boolean, evt: Event) => void` | - | - | 仅使用默认列表并开启 `virtual` 下可用 |
+| `onScrolledChange` | 数据列表滚动的位置发生变化 | `(isSource: boolean, startIndex: number, endIndex: number, visibleNodes: unknown[]) => void` | - | - | 仅使用默认列表并开启 `virtual` 下可用 |
+| `onScrolledBottom` | 源数据列表滚动到底部时触发 | `(isSource: boolean) => void` | - | - | 仅使用默认列表并开启 `virtual` 下可用 |
+| `onSearch` | 穿梭框搜索触发回调函数 | `(isSource: boolean, searchValue: string | undefined) => void` | - | - | - |
+| `onSelectAll` | 数据列表全部勾选回调函数 | `(isSource: boolean, checked: boolean) => void` | - | - | - |
+| `onClear` | 已选数据清除的回调函数 | `(isSource: boolean) => void` | - | - | - |
+
+```ts
+export interface TransferScroll {
+  height?: string | number
+  width?: string | number | { source?: string | number; target?: string | number }
+  fullHeight?: boolean
+}
+
+export type SearchFn<T extends BaseTransferData = TransferData> = (
+  isSource: boolean,
+  item: T,
+  searchValue: string,
+) => boolean
+
+export interface TransferPaginationType {
+  pageIndex?: [number | undefined, number | undefined] | [number | undefined] | number
+  pageSize?: [number | undefined, number | undefined] | [number | undefined] | number
+  disabled?: boolean
+  total?: [number | undefined, number | undefined] | [number | undefined] | number
+  onChange?: (isSource: boolean, pageIndex: number, pageSize: number) => void
+}
+```
+
+#### TransferSlots
+
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `default` | 穿梭框列表主体 | `TransferBindings & { isSource: boolean }` | - |
+| `headerLabel` | 穿梭框列表头部 | `{ data: TransferData[], isSource: boolean }` | - |
+| `headerSuffix` | 穿梭框列表头部 | `{ isSource: boolean }` | - |
+| `footer` | 穿梭框列表底部 | `TransferBindings & { isSource: boolean }` | - |
+| `operations` | 穿梭框列表底部 | `TransferOperationsContext` | - |
+| `label` | 穿梭框列表label | `TransferData` | 仅在使用默认列表时生效 |
+| `empty` | 穿梭框列表空状态 | `EmptyProps` | 仅在使用默认列表时生效 |
+
+```ts
+export interface TransferListSlotParams<T extends TransferData = TransferData> {
+  // 是否是源数据列表（待选框）
+  isSource: boolean
+  // 分割好的数据
+  data: T[]
+  // 过滤后的数据
+  filteredData: T[]
+  // 分页处理过后的数据
+  paginatedData: T[]
+  // 源数据
+  dataSource: T[]
+  // 数据key与数据项对应Map
+  dataKeyMap: Map<VKey, T>
+  // 过滤后的源数据
+  filteredDataSource: T[]
+  // 分页后的源数据
+  paginatedDataSource: T[]
+  // 已选数据key
+  selectedKeys: VKey[]
+  // 已选数据key集合
+  selectedKeySet: Set<VKey>
+  // 已勾选数据
+  selectedKeys: VKey[]
+  // 已勾选数据集合
+  selectedKeySet: Set<VKey>
+  // 禁用数据key集合
+  disabledKeys: Set<VKey>
+  // 全部勾选禁用状态
+  selectAllDisabled: boolean
+  // 全部勾选状态
+  selectAllStatus: { checked: boolean; indeterminate: boolean }
+
+  // 是否展示全部勾选框
+  showSelectAll: boolean
+  // 是否可搜索
+  searchable: boolean
+  // 分页配置
+  pagination: PaginationProps | null
+
+  // 触发数据添加
+  triggerAppend: (keys: VKey[]) => void
+  // 触发数据移除
+  triggerRemove: (keys: VKey[]) => void
+  // 勾选状态改变触发函数
+  handleSelectChange: (keys: Set<VKey> | VKey[]) => void
+  // 全部勾选触发函数
+  selectAll: (selected?: boolean) => void
+
+  // 搜索输入
+  searchValue: string
+  // 搜索输入触发函数
+  handleSearchChange: (value: string) => void
+  // 获取数据key
+  getRowKey: (item: TransferData) => VKey
+}
+```
+
+```ts
+export interface TransferOperationsSlotParams {
+  // 数据添加禁用状态
+  appendDisabled: boolean
+  // 数据移除禁用状态
+  removeDisabled: boolean
+  // 添加全部数据禁用状态
+  appendAllDisabled: boolean
+  // 清除已选数据禁用状态
+  clearDisabled: boolean
+  // 触发数据添加
+  triggerAppend: (keys?: VKey[]) => void
+  // 触发数据移除
+  triggerRemove: (keys?: VKey[]) => void
+  // 触发添加全部数据
+  triggerAppendAll: () => void
+  // 触发清除已选数据
+  triggerClear: () => void
+}
+```
+
+#### TransferMethods
+
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `scrollTo` | 源数据滚动到指定位置 | `(option?: number \| VirtualScrollToOptions, isSource?: boolean) => void` | 仅使用默认列表并开启 `virtual` 下可用 |
diff --git a/packages/components/transfer/index.ts b/packages/components/transfer/index.ts
new file mode 100644
index 000000000..c8f0a966c
--- /dev/null
+++ b/packages/components/transfer/index.ts
@@ -0,0 +1,37 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { TransferComponent } from './src/types'
+
+import Transfer from './src/Transfer'
+
+const IxTransfer = Transfer as unknown as TransferComponent
+
+export { IxTransfer }
+
+export type {
+  TransferInstance,
+  TransferComponent,
+  TransferPublicProps as TransferProps,
+  TransferListSlotParams,
+  TransferOperationsSlotParams,
+  TransferData,
+  TransferPaginationType,
+  TransferBindings,
+  TransferDataStrategiesConfig,
+  TransferMode,
+  TransferScroll,
+  TransferScrollTo,
+  SearchFn,
+} from './src/types'
+
+export {
+  TRANSFER_DATA_STRATEGIES,
+  TRANSFER_SOURCE_TOKEN,
+  TRANSFER_TARGET_TOKEN,
+  TRANSFER_OPERATIONS_TOKEN,
+} from './src/token'
diff --git a/packages/components/transfer/src/Transfer.tsx b/packages/components/transfer/src/Transfer.tsx
new file mode 100644
index 000000000..756f70def
--- /dev/null
+++ b/packages/components/transfer/src/Transfer.tsx
@@ -0,0 +1,106 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { ɵCheckableListInstance } from '@idux/components/_private/checkable-list'
+
+import { computed, defineComponent, provide, ref } from 'vue'
+
+import { isBoolean, isNil } from 'lodash-es'
+
+import { useGlobalConfig } from '@idux/components/config'
+
+import TransferOperations from './TransferOperations'
+import { usePagination } from './composables/usePagination'
+import { useSearchable } from './composables/useSearchable'
+import { useTransferBindings } from './composables/useTransferBindings'
+import { useTransferData } from './composables/useTransferData'
+import { useTransferDataStrategies } from './composables/useTransferDataStrategies'
+import { useTransferOperations } from './composables/useTransferOperations'
+import { useTransferSelectState } from './composables/useTransferSelectState'
+import TransferList from './list/TransferList'
+import { TRANSFER_OPERATIONS_TOKEN, TRANSFER_SOURCE_TOKEN, TRANSFER_TARGET_TOKEN, transferContext } from './token'
+import { type TransferApis, type TransferScrollTo, transferProps } from './types'
+
+export default defineComponent({
+  name: 'IxTransfer',
+  props: transferProps,
+  setup(props, { slots, expose }) {
+    const common = useGlobalConfig('common')
+    const config = useGlobalConfig('transfer')
+    const locale = useGlobalConfig('locale').transfer
+    const mergedPrefixCls = computed(() => `${common.prefixCls}-transfer`)
+
+    const showSelectAll = computed(() => props.showSelectAll ?? config.showSelectAll)
+    const { source: sourceSearchable, target: targetSearchable } = useSearchable(props, config)
+    const transferDataStrategies = useTransferDataStrategies()
+    const transferPaginationContext = usePagination(props)
+    const transferDataContext = useTransferData(props, config, transferDataStrategies, transferPaginationContext)
+    const transferSelectStateContext = useTransferSelectState(props, transferDataContext)
+    const transferOperationsContext = useTransferOperations(props, transferDataContext, transferSelectStateContext)
+
+    const { sourceBindings, targetBindings } = useTransferBindings(
+      props,
+      transferDataContext,
+      transferOperationsContext,
+      transferSelectStateContext,
+      transferPaginationContext,
+      showSelectAll,
+      sourceSearchable,
+      targetSearchable,
+    )
+
+    const sourceCheckableListRef = ref<ɵCheckableListInstance>()
+    const targetCheckableListRef = ref<ɵCheckableListInstance>()
+
+    const transferApi: TransferApis = {
+      scrollTo: ((options, isSource) => {
+        if (isNil(options) && isNil(isSource)) {
+          return sourceCheckableListRef.value?.scrollTo()
+        }
+
+        if (isBoolean(options)) {
+          return (options ? sourceCheckableListRef : targetCheckableListRef).value?.scrollTo()
+        }
+
+        if (isNil(isSource)) {
+          return sourceCheckableListRef.value?.scrollTo(options)
+        }
+
+        return (isSource ? sourceCheckableListRef : targetCheckableListRef).value?.scrollTo(options)
+      }) as TransferScrollTo,
+    }
+
+    expose(transferApi)
+
+    provide(transferContext, {
+      props,
+      slots,
+      locale,
+      config,
+      mergedPrefixCls,
+      sourceCheckableListRef,
+      targetCheckableListRef,
+      showSelectAll,
+      getRowKey: transferDataContext.getRowKey,
+    })
+    provide(TRANSFER_SOURCE_TOKEN, sourceBindings)
+    provide(TRANSFER_TARGET_TOKEN, targetBindings)
+    provide(TRANSFER_OPERATIONS_TOKEN, transferOperationsContext)
+
+    return () => {
+      const prefixCls = mergedPrefixCls.value
+
+      return (
+        <div class={prefixCls}>
+          <TransferList isSource={true} />
+          <TransferOperations />
+          <TransferList isSource={false} />
+        </div>
+      )
+    }
+  },
+})
diff --git a/packages/components/transfer/src/TransferOperations.tsx b/packages/components/transfer/src/TransferOperations.tsx
new file mode 100644
index 000000000..23f2d3689
--- /dev/null
+++ b/packages/components/transfer/src/TransferOperations.tsx
@@ -0,0 +1,61 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import { type VNode, defineComponent, inject } from 'vue'
+
+import { isString } from 'lodash-es'
+
+import { IxButton } from '@idux/components/button'
+
+import { TRANSFER_OPERATIONS_TOKEN, transferContext } from './token'
+import { convertToSlotParams } from './utils'
+
+export default defineComponent({
+  setup() {
+    const { slots, props: transferProps, mergedPrefixCls } = inject(transferContext)!
+    const transferOperationsContext = inject(TRANSFER_OPERATIONS_TOKEN)!
+    const { appendDisabled, removeDisabled, triggerAppend, triggerRemove } = transferOperationsContext
+
+    const handleTransferRightClick = () => {
+      triggerAppend()
+    }
+    const handleTransferLeftClick = () => {
+      triggerRemove()
+    }
+
+    const renderBtn = (prefixCls: string, icon: string | VNode, disabled: boolean, onClick: () => void) => {
+      if (isString(icon)) {
+        return <IxButton class={`${prefixCls}-btn`} icon={icon} disabled={disabled} onClick={onClick} />
+      }
+
+      return <IxButton class={`${prefixCls}-btn`} v-slos={{ icon: () => icon }} disabled={disabled} onClick={onClick} />
+    }
+
+    const renderOperations = (prefixCls: string) => {
+      if (slots.operations) {
+        return slots.operations(convertToSlotParams(transferOperationsContext))
+      }
+
+      if (transferProps.mode === 'transferBySelect') {
+        return
+      }
+
+      return (
+        <div class={`${prefixCls}-inner`}>
+          {renderBtn(prefixCls, 'right-double', appendDisabled.value, handleTransferRightClick)}
+          {renderBtn(prefixCls, 'left-double', removeDisabled.value, handleTransferLeftClick)}
+        </div>
+      )
+    }
+
+    return () => {
+      const prefixCls = `${mergedPrefixCls.value}-operations`
+
+      return <div class={prefixCls}>{renderOperations(prefixCls)}</div>
+    }
+  },
+})
diff --git a/packages/components/transfer/src/composables/useGetRowKey.ts b/packages/components/transfer/src/composables/useGetRowKey.ts
new file mode 100644
index 000000000..31dcf42dd
--- /dev/null
+++ b/packages/components/transfer/src/composables/useGetRowKey.ts
@@ -0,0 +1,36 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { TransferData, TransferProps } from '../types'
+import type { TransferConfig } from '@idux/components/config'
+
+import { computed } from 'vue'
+
+import { isString } from 'lodash-es'
+
+import { Logger, type VKey } from '@idux/cdk/utils'
+
+export type GetRowKey = (record: TransferData) => VKey
+
+export function useGetRowKey(props: TransferProps, config: TransferConfig): GetRowKey {
+  const getKey = computed(() => {
+    const getKey = props.getKey ?? config.getKey
+    if (isString(getKey)) {
+      return (record: TransferData) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const key = (record as any)[getKey]
+        if (__DEV__ && key === undefined) {
+          Logger.warn('components/transfer', 'Each record in transfer should have a unique `key` prop.')
+        }
+        return key
+      }
+    }
+    return getKey
+  })
+
+  return (record: TransferData) => getKey.value(record)
+}
diff --git a/packages/components/transfer/src/composables/usePagination.ts b/packages/components/transfer/src/composables/usePagination.ts
new file mode 100644
index 000000000..248d56d19
--- /dev/null
+++ b/packages/components/transfer/src/composables/usePagination.ts
@@ -0,0 +1,93 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { TransferProps } from '../types'
+import type { PaginationConfig } from '@idux/components/config'
+import type { PaginationProps } from '@idux/components/pagination'
+
+import { type ComputedRef, computed, ref, watchEffect } from 'vue'
+
+import { isArray } from 'lodash-es'
+
+import { useGlobalConfig } from '@idux/components/config'
+
+export interface TransferPaginationContext {
+  sourcePagination: ComputedRef<PaginationProps | undefined>
+  targetPagination: ComputedRef<PaginationProps | undefined>
+}
+
+export function usePagination(props: TransferProps): TransferPaginationContext {
+  const paginationConfig = useGlobalConfig('pagination')
+
+  return {
+    sourcePagination: createPagination(props, paginationConfig, true),
+    targetPagination: createPagination(props, paginationConfig, false),
+  }
+}
+
+function createPagination(
+  props: TransferProps,
+  paginationConfig: PaginationConfig,
+  isSource: boolean,
+): ComputedRef<PaginationProps | undefined> {
+  const pageIndex = ref<number>()
+  const pageSize = ref<number>()
+
+  const tempPagination = computed(() => {
+    const pagination = props.pagination
+    if (!pagination) {
+      return null
+    }
+    if (pagination === true) {
+      return {}
+    }
+
+    const idx = isSource ? 0 : 1
+
+    const pageIndex = isArray(pagination.pageIndex)
+      ? pagination.pageIndex
+      : ([pagination.pageIndex] as [number | undefined])
+    const pageSize = isArray(pagination.pageSize)
+      ? pagination.pageSize
+      : ([pagination.pageSize] as [number | undefined])
+    const total = isArray(pagination.total) ? pagination.total : ([pagination.total] as [number | undefined])
+
+    return {
+      pageIndex: pageIndex?.[idx],
+      pageSize: pageSize?.[idx],
+      disabled: props.disabled || pagination.disabled,
+      total: total?.[idx],
+      onChange: (pageIndex: number, pageSize: number) => pagination.onChange?.(isSource, pageIndex, pageSize),
+    }
+  })
+
+  watchEffect(() => {
+    const pagination = tempPagination.value
+    pageIndex.value = pagination?.pageIndex ?? 1
+    pageSize.value = pagination?.pageSize ?? paginationConfig.pageSize
+  })
+
+  const handlePageIndexChange = (index: number) => {
+    pageIndex.value = index
+  }
+
+  return computed(() => {
+    const pagination = tempPagination.value
+
+    if (pagination === null) {
+      return
+    }
+    return {
+      simple: true,
+      showTotal: false,
+      ...pagination,
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value,
+      'onUpdate:pageIndex': handlePageIndexChange,
+    }
+  })
+}
diff --git a/packages/components/transfer/src/composables/useSearchable.ts b/packages/components/transfer/src/composables/useSearchable.ts
new file mode 100644
index 000000000..a9d2c05dc
--- /dev/null
+++ b/packages/components/transfer/src/composables/useSearchable.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { TransferProps } from '../types'
+import type { TransferConfig } from '@idux/components/config'
+
+import { type ComputedRef, computed } from 'vue'
+
+import { isBoolean } from 'lodash-es'
+
+export function useSearchable(
+  props: TransferProps,
+  config: TransferConfig,
+): { source: ComputedRef<boolean>; target: ComputedRef<boolean> } {
+  return {
+    source: computed(() => getSearchable(props, config, true)),
+    target: computed(() => getSearchable(props, config, false)),
+  }
+}
+
+function getSearchable(props: TransferProps, config: TransferConfig, isSource: boolean) {
+  const searchable = props.searchable ?? config.searchable
+  if (!searchable || isBoolean(searchable)) {
+    return !!searchable
+  }
+
+  return isSource ? searchable.source : searchable.target
+}
diff --git a/packages/components/transfer/src/composables/useTransferBindings.ts b/packages/components/transfer/src/composables/useTransferBindings.ts
new file mode 100644
index 000000000..ec6cfe623
--- /dev/null
+++ b/packages/components/transfer/src/composables/useTransferBindings.ts
@@ -0,0 +1,122 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { TransferBindings, TransferData, TransferProps } from '../types'
+import type { TransferPaginationContext } from './usePagination'
+import type { TransferDataContext } from './useTransferData'
+import type { TransferOperationsContext } from './useTransferOperations'
+import type { TransferSelectStateContext } from './useTransferSelectState'
+import type { ComputedRef } from 'vue'
+
+import { callEmit } from '@idux/cdk/utils'
+
+export function useTransferBindings<T extends TransferData = TransferData>(
+  props: TransferProps,
+  transferDataContext: TransferDataContext<T>,
+  transferOperationsContext: TransferOperationsContext,
+  transferSelectStateContext: TransferSelectStateContext,
+  transferPaginationContext: TransferPaginationContext,
+  showSelectAll: ComputedRef<boolean>,
+  sourceSearchable: ComputedRef<boolean>,
+  targetSearchable: ComputedRef<boolean>,
+): {
+  sourceBindings: TransferBindings<T>
+  targetBindings: TransferBindings<T>
+} {
+  const {
+    dataSource,
+    sourceData,
+    targetData,
+    targetKeySet,
+    dataKeyMap,
+    disabledKeys,
+    disabledSourceKeys,
+    disabledTargetKeys,
+    filteredDataSource,
+    filteredSourceData,
+    filteredTargetData,
+    paginatedDataSource,
+    paginatedSourceData,
+    paginatedTargetData,
+    sourceSearchValue,
+    setSourceSearchValue,
+    targetSearchValue,
+    setTargetSearchValue,
+    getRowKey,
+  } = transferDataContext
+  const {
+    sourceSelectedKeys,
+    targetSelectedKeys,
+    sourceSelectedKeySet,
+    targetSelectedKeySet,
+    sourceSelectAllStatus,
+    targetSelectAllStatus,
+    sourceSelectAllDisabled,
+    targetSelectAllDisabled,
+    handleSourceSelectChange,
+    handleTargetSelectChange,
+    handleSourceSelectAll,
+    handleTargetSelectAll,
+  } = transferSelectStateContext
+  const { triggerAppend, triggerRemove } = transferOperationsContext
+
+  const commonBindings = {
+    dataSource,
+    dataKeyMap,
+    disabledDataSourceKeys: disabledKeys,
+    filteredDataSource,
+    paginatedDataSource,
+    targetKeySet,
+    showSelectAll,
+    triggerAppend,
+    triggerRemove,
+    getRowKey,
+  }
+
+  return {
+    sourceBindings: {
+      data: sourceData,
+      filteredData: filteredSourceData,
+      paginatedData: paginatedSourceData,
+      pagination: transferPaginationContext.sourcePagination,
+      disabledKeys: disabledSourceKeys,
+      selectedKeys: sourceSelectedKeys,
+      selectedKeySet: sourceSelectedKeySet,
+      selectAllDisabled: sourceSelectAllDisabled,
+      selectAllStatus: sourceSelectAllStatus,
+      searchable: sourceSearchable,
+      selectAll: handleSourceSelectAll,
+      handleSelectChange: handleSourceSelectChange,
+      searchValue: sourceSearchValue,
+      handleSearchChange: (searchValue: string) => {
+        setSourceSearchValue(searchValue)
+        callEmit(props.onSearch, true, searchValue)
+      },
+      ...commonBindings,
+    },
+    targetBindings: {
+      data: targetData,
+      filteredData: filteredTargetData,
+      paginatedData: paginatedTargetData,
+      pagination: transferPaginationContext.targetPagination,
+      disabledKeys: disabledTargetKeys,
+      selectedKeys: targetSelectedKeys,
+      selectedKeySet: targetSelectedKeySet,
+      selectAllDisabled: targetSelectAllDisabled,
+      selectAllStatus: targetSelectAllStatus,
+      searchable: targetSearchable,
+      selectAll: handleTargetSelectAll,
+      handleSelectChange: handleTargetSelectChange,
+      searchValue: targetSearchValue,
+      handleSearchChange: (searchValue: string) => {
+        setTargetSearchValue(searchValue)
+        callEmit(props.onSearch, false, searchValue)
+      },
+      ...commonBindings,
+    },
+  }
+}
diff --git a/packages/components/transfer/src/composables/useTransferData.ts b/packages/components/transfer/src/composables/useTransferData.ts
new file mode 100644
index 000000000..886f8e3a3
--- /dev/null
+++ b/packages/components/transfer/src/composables/useTransferData.ts
@@ -0,0 +1,192 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { TransferData, TransferDataStrategies, TransferProps } from '../types'
+import type { TransferPaginationContext } from './usePagination'
+import type { TransferConfig } from '@idux/components/config'
+import type { PaginationProps } from '@idux/components/pagination'
+
+import { type ComputedRef, computed } from 'vue'
+
+import { type VKey, callEmit, useControlledProp, useState } from '@idux/cdk/utils'
+
+import { type GetRowKey, useGetRowKey } from './useGetRowKey'
+
+export interface TransferDataContext<T extends TransferData = TransferData> {
+  dataSource: ComputedRef<T[]>
+  dataKeyMap: ComputedRef<Map<VKey, T>>
+  sourceData: ComputedRef<T[]>
+  targetData: ComputedRef<T[]>
+  sourceDataKeys: ComputedRef<Set<VKey>>
+  targetDataKeys: ComputedRef<Set<VKey>>
+  filteredDataSource: ComputedRef<T[]>
+  filteredSourceData: ComputedRef<T[]>
+  filteredTargetData: ComputedRef<T[]>
+  paginatedDataSource: ComputedRef<T[]>
+  paginatedSourceData: ComputedRef<T[]>
+  paginatedTargetData: ComputedRef<T[]>
+  targetKeys: ComputedRef<VKey[]>
+  targetKeySet: ComputedRef<Set<VKey>>
+  append: (keys: VKey[]) => void
+  remove: (keys: VKey[]) => void
+  clear: () => void
+
+  getRowKey: GetRowKey
+
+  disabledKeys: ComputedRef<Set<VKey>>
+  disabledSourceKeys: ComputedRef<Set<VKey>>
+  disabledTargetKeys: ComputedRef<Set<VKey>>
+
+  sourceSearchValue: ComputedRef<string>
+  setSourceSearchValue: (value: string) => void
+
+  targetSearchValue: ComputedRef<string>
+  setTargetSearchValue: (value: string) => void
+}
+
+export function useTransferData<T extends TransferData = TransferData>(
+  props: TransferProps,
+  config: TransferConfig,
+  transferDataStrategies: TransferDataStrategies<T>,
+  transferPaginationContext: TransferPaginationContext,
+): TransferDataContext<T> {
+  const getRowKey = useGetRowKey(props, config)
+  const {
+    genDataKeys,
+    genDataKeyMap,
+    genDisabledKeys,
+    separateDataSource,
+    dataFilter,
+    append: _append,
+    remove: _remove,
+  } = transferDataStrategies
+
+  const dataSource = computed(() => props.dataSource as T[])
+  const dataKeyMap = computed(() => genDataKeyMap(dataSource.value, getRowKey))
+
+  const [targetKeys, setTargetKeys] = useControlledProp(props, 'value', () => [])
+  const [sourceSearchValue, setSourceSearchValue] = useState('')
+  const [targetSearchValue, setTargetSearchValue] = useState('')
+
+  const targetKeySet = computed(() => new Set(targetKeys.value))
+
+  const handleChange = (keys: VKey[]) => {
+    callEmit(props.onChange, keys, targetKeys.value)
+    setTargetKeys(keys)
+  }
+
+  const separatedData = computed(() =>
+    separateDataSource(dataSource.value, dataKeyMap.value, targetKeySet.value, getRowKey),
+  )
+  const sourceData = computed(() => separatedData.value.sourceData)
+  const targetData = computed(() => separatedData.value.targetData)
+
+  const sourceDataKeys = computed(() => genDataKeys(sourceData.value, getRowKey))
+  const targetDataKeys = computed(() => genDataKeys(targetData.value, getRowKey))
+
+  const filteredDataSource = computed(() =>
+    dataFilter(
+      dataSource.value,
+      sourceSearchValue.value,
+      (item, searchValue) => !props.searchFn || props.searchFn(true, item, searchValue),
+    ),
+  )
+  const filteredSourceData = computed(() =>
+    dataFilter(
+      sourceData.value,
+      sourceSearchValue.value,
+      (item, searchValue) => !props.searchFn || props.searchFn(true, item, searchValue),
+    ),
+  )
+  const filteredTargetData = computed(() =>
+    dataFilter(
+      targetData.value,
+      targetSearchValue.value,
+      (item, searchValue) => !props.searchFn || props.searchFn(false, item, searchValue),
+    ),
+  )
+
+  const paginatedDataSource = computed(() =>
+    getPaginatedData(filteredDataSource.value, transferPaginationContext.sourcePagination.value),
+  )
+  const paginatedSourceData = computed(() =>
+    getPaginatedData(filteredSourceData.value, transferPaginationContext.sourcePagination.value),
+  )
+  const paginatedTargetData = computed(() =>
+    getPaginatedData(filteredTargetData.value, transferPaginationContext.targetPagination.value),
+  )
+
+  const append = (keys: VKey[]) => {
+    _append(keys, targetKeySet.value, getRowKey, handleChange)
+  }
+  const remove = (keys: VKey[]) => {
+    _remove(keys, targetKeySet.value, getRowKey, handleChange)
+  }
+
+  const clear = () => {
+    handleChange(Array.from(disabledTargetKeys.value))
+  }
+
+  const disabledKeys = computed(() => genDisabledKeys(dataSource.value, getRowKey))
+  const disabledTargetKeys = computed(() => {
+    const keys = genDisabledKeys(targetData.value, getRowKey)
+
+    targetKeySet.value.forEach(key => {
+      if (disabledKeys.value.has(key)) {
+        keys.add(key)
+      }
+    })
+    return keys
+  })
+  const disabledSourceKeys = computed(() => genDisabledKeys(sourceData.value, getRowKey))
+
+  return {
+    dataSource,
+    dataKeyMap,
+    sourceData,
+    targetData,
+    sourceDataKeys,
+    targetDataKeys,
+    filteredDataSource,
+    filteredSourceData,
+    filteredTargetData,
+    paginatedDataSource,
+    paginatedSourceData,
+    paginatedTargetData,
+    targetKeys,
+    targetKeySet,
+    append,
+    remove,
+    clear,
+
+    getRowKey,
+
+    disabledKeys,
+    disabledSourceKeys,
+    disabledTargetKeys,
+
+    sourceSearchValue,
+    setSourceSearchValue,
+    targetSearchValue,
+    setTargetSearchValue,
+  }
+}
+
+function getPaginatedData<T = unknown>(data: T[], pagination: PaginationProps | undefined) {
+  if (!pagination || !pagination.pageSize) {
+    return data
+  }
+
+  const { total } = pagination
+  if (total && data.length < total) {
+    return data
+  }
+
+  const pageSize = pagination.pageSize!
+  const startIndex = (pagination.pageIndex! - 1) * pageSize
+  return data.slice(startIndex, startIndex + pageSize)
+}
diff --git a/packages/components/transfer/src/composables/useTransferDataStrategies.ts b/packages/components/transfer/src/composables/useTransferDataStrategies.ts
new file mode 100644
index 000000000..5198dad00
--- /dev/null
+++ b/packages/components/transfer/src/composables/useTransferDataStrategies.ts
@@ -0,0 +1,106 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { TransferData, TransferDataStrategies } from '../types'
+
+import { inject, onUnmounted } from 'vue'
+
+import { VKey } from '@idux/cdk/utils'
+
+import { TRANSFER_DATA_STRATEGIES } from '../token'
+
+function createDefaultStrategies<T extends TransferData = TransferData>(): TransferDataStrategies<T> {
+  const cachedDataKeyMap: Map<VKey, T> = new Map()
+  onUnmounted(() => {
+    cachedDataKeyMap.clear()
+  })
+
+  return {
+    genDataKeys: (data, getRowKey) => {
+      return new Set(data.map(data => getRowKey(data)))
+    },
+    genDataKeyMap: (dataSource, getRowKey) => {
+      const dataKeyMap = new Map()
+
+      dataSource.forEach(item => {
+        dataKeyMap.set(getRowKey(item), item)
+      })
+
+      return dataKeyMap
+    },
+    genDisabledKeys: (data, getRowKey) => {
+      const keys = new Set<VKey>()
+      data.forEach(item => {
+        if (item.disabled) {
+          keys.add(getRowKey(item))
+        }
+      })
+      return keys
+    },
+    separateDataSource: (dataSource, dataKeyMap, selectedKeySet, getRowKey) => {
+      const sourceData = dataSource.filter(data => !selectedKeySet.has(getRowKey(data)))
+      const targetData: T[] = []
+
+      selectedKeySet.forEach(key => {
+        const data = dataKeyMap.get(key) ?? cachedDataKeyMap.get(key)
+        if (data && !cachedDataKeyMap.has(key)) {
+          cachedDataKeyMap.set(key, data)
+        }
+
+        targetData.push(data ?? ({ key } as unknown as T))
+      })
+
+      for (const cachedKey of cachedDataKeyMap.keys()) {
+        if (!selectedKeySet.has(cachedKey)) {
+          cachedDataKeyMap.delete(cachedKey)
+        }
+      }
+      return {
+        sourceData,
+        targetData,
+      }
+    },
+    dataFilter: (data, searchValue, searchFn) => {
+      if (!searchValue) {
+        return data
+      }
+
+      return data.filter(item => searchFn(item, searchValue))
+    },
+    append: (keys, selectedKeySet, _, handleChange) => {
+      const newKeys = new Set(selectedKeySet)
+
+      keys.forEach(key => {
+        newKeys.add(key)
+      })
+
+      if (newKeys.size !== selectedKeySet.size) {
+        handleChange(Array.from(newKeys))
+      }
+    },
+    remove: (keys, selectedKeySet, _, handleChange) => {
+      const newKeys = new Set(selectedKeySet)
+
+      keys.forEach(key => {
+        newKeys.delete(key)
+      })
+
+      if (newKeys.size !== selectedKeySet.size) {
+        handleChange(Array.from(newKeys))
+      }
+    },
+  }
+}
+
+export function useTransferDataStrategies<T extends TransferData = TransferData>(): TransferDataStrategies<T> {
+  const strategies = inject<TransferDataStrategies<T> | null>(TRANSFER_DATA_STRATEGIES, null)
+  const defaultStrategies = createDefaultStrategies<T>()
+
+  return strategies
+    ? { ...(defaultStrategies as TransferDataStrategies<T>), ...strategies }
+    : (defaultStrategies as TransferDataStrategies<T>)
+}
diff --git a/packages/components/transfer/src/composables/useTransferOperations.ts b/packages/components/transfer/src/composables/useTransferOperations.ts
new file mode 100644
index 000000000..869ac8b64
--- /dev/null
+++ b/packages/components/transfer/src/composables/useTransferOperations.ts
@@ -0,0 +1,97 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { TransferData, TransferProps } from '../types'
+import type { TransferDataContext } from './useTransferData'
+import type { TransferSelectStateContext } from './useTransferSelectState'
+
+import { type ComputedRef, computed } from 'vue'
+
+import { type VKey, callEmit } from '@idux/cdk/utils'
+
+export interface TransferOperationsContext {
+  appendDisabled: ComputedRef<boolean>
+  removeDisabled: ComputedRef<boolean>
+  appendAllDisabled: ComputedRef<boolean>
+  clearDisabled: ComputedRef<boolean>
+  triggerAppend: (keys?: VKey[]) => void
+  triggerRemove: (keys?: VKey[]) => void
+  triggerAppendAll: () => void
+  triggerClear: () => void
+}
+
+export function useTransferOperations<T extends TransferData = TransferData>(
+  props: TransferProps,
+  transferDataContext: TransferDataContext<T>,
+  transferSelectStateContext: TransferSelectStateContext,
+): TransferOperationsContext {
+  const {
+    dataKeyMap,
+    sourceData,
+    targetData,
+    disabledSourceKeys,
+    disabledTargetKeys,
+    append,
+    remove,
+    clear,
+    getRowKey,
+  } = transferDataContext
+  const { sourceSelectedKeys, targetSelectedKeys } = transferSelectStateContext
+
+  const appendDisabled = computed(() => props.disabled || sourceSelectedKeys.value.length <= 0)
+  const removeDisabled = computed(() => props.disabled || targetSelectedKeys.value.length <= 0)
+  const appendAllDisabled = computed(
+    () => props.disabled || sourceData.value.every(item => disabledSourceKeys.value.has(getRowKey(item))),
+  )
+  const clearDisabled = computed(
+    () => props.disabled || targetData.value.every(item => disabledTargetKeys.value.has(getRowKey(item))),
+  )
+
+  const triggerAppend = (keys?: VKey[]) => {
+    if ((!keys && appendDisabled.value) || (keys && props.disabled)) {
+      return
+    }
+
+    append(keys ?? Array.from(sourceSelectedKeys.value))
+  }
+
+  const triggerRemove = (keys?: VKey[]) => {
+    if ((!keys && removeDisabled.value) || (keys && props.disabled)) {
+      return
+    }
+
+    remove(keys ?? Array.from(targetSelectedKeys.value))
+  }
+
+  const triggerAppendAll = () => {
+    if (appendAllDisabled.value) {
+      return
+    }
+
+    append(Array.from(dataKeyMap.value.keys()).filter(key => !disabledSourceKeys.value.has(key)))
+  }
+
+  const triggerClear = () => {
+    if (clearDisabled.value) {
+      return
+    }
+
+    clear()
+    callEmit(props.onClear)
+  }
+
+  return {
+    appendDisabled,
+    removeDisabled,
+    appendAllDisabled,
+    clearDisabled,
+    triggerAppend,
+    triggerRemove,
+    triggerAppendAll,
+    triggerClear,
+  }
+}
diff --git a/packages/components/transfer/src/composables/useTransferSelectState.ts b/packages/components/transfer/src/composables/useTransferSelectState.ts
new file mode 100644
index 000000000..5956cc019
--- /dev/null
+++ b/packages/components/transfer/src/composables/useTransferSelectState.ts
@@ -0,0 +1,230 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { TransferProps } from '../types'
+import type { TransferDataContext } from './useTransferData'
+
+import { type ComputedRef, computed, watch } from 'vue'
+
+import { isArray } from 'lodash-es'
+
+import { type VKey, callEmit, useControlledProp } from '@idux/cdk/utils'
+
+export interface TransferSelectStateContext {
+  sourceSelectedKeys: ComputedRef<VKey[]>
+  targetSelectedKeys: ComputedRef<VKey[]>
+  sourceSelectedKeySet: ComputedRef<Set<VKey>>
+  targetSelectedKeySet: ComputedRef<Set<VKey>>
+  handleSourceSelectChange: (keys: VKey[] | Set<VKey>) => void
+  handleTargetSelectChange: (keys: VKey[] | Set<VKey>) => void
+
+  sourceSelectAllStatus: ComputedRef<{ checked: boolean; indeterminate: boolean }>
+  targetSelectAllStatus: ComputedRef<{ checked: boolean; indeterminate: boolean }>
+  handleSourceSelectAll: (selected?: boolean) => void
+  handleTargetSelectAll: (selected?: boolean) => void
+
+  sourceSelectAllDisabled: ComputedRef<boolean>
+  targetSelectAllDisabled: ComputedRef<boolean>
+
+  setSourceSelectedKeys: (keys: VKey[]) => void
+  setTargetSelectedKeys: (keys: VKey[]) => void
+}
+
+export function useTransferSelectState(
+  props: TransferProps,
+  transferDataContext: TransferDataContext,
+): TransferSelectStateContext {
+  const [sourceSelectedKeys, setSourceSelectedKeys] = useControlledProp(props, 'sourceSelectedKeys', () => [])
+  const [targetSelectedKeys, setTargetSelectedKeys] = useControlledProp(props, 'targetSelectedKeys', () => [])
+
+  const sourceSelectedKeySet = computed(() => new Set(sourceSelectedKeys.value))
+  const targetSelectedKeySet = computed(() => new Set(targetSelectedKeys.value))
+
+  const { dataKeyMap, sourceDataKeys, targetDataKeys, disabledKeys, disabledSourceKeys, disabledTargetKeys } =
+    transferDataContext
+
+  const sourceCheckableDataCount = computed(() => {
+    const allCount = props.mode === 'transferBySelect' ? dataKeyMap.value.size : sourceDataKeys.value.size
+    const disabledCount = props.mode === 'transferBySelect' ? disabledKeys.value.size : disabledSourceKeys.value.size
+
+    return allCount - disabledCount
+  })
+  const targetCheckableDataCount = computed(() => targetDataKeys.value.size - disabledTargetKeys.value.size)
+  const sourceSelectAllStatus = computed(() => {
+    return {
+      checked:
+        sourceCheckableDataCount.value === sourceSelectedKeys.value.length && sourceSelectedKeys.value.length > 0,
+      indeterminate:
+        sourceCheckableDataCount.value > sourceSelectedKeys.value.length && sourceSelectedKeys.value.length > 0,
+    }
+  })
+  const targetSelectAllStatus = computed(() => {
+    return {
+      checked:
+        targetCheckableDataCount.value === targetSelectedKeys.value.length && targetSelectedKeys.value.length > 0,
+      indeterminate:
+        targetCheckableDataCount.value > targetSelectedKeys.value.length && targetSelectedKeys.value.length > 0,
+    }
+  })
+
+  watch(
+    [sourceCheckableDataCount, dataKeyMap, disabledKeys, targetDataKeys],
+    (_, [, , , prevSelectedKeys]) => {
+      const tempKeys = new Set(sourceSelectedKeys.value)
+
+      sourceSelectedKeys.value.forEach(key => {
+        if (!dataKeyMap.value.has(key) || disabledKeys.value.has(key)) {
+          tempKeys.delete(key)
+          return
+        }
+
+        if (props.mode === 'normal' && targetDataKeys.value.has(key)) {
+          tempKeys.delete(key)
+        }
+      })
+
+      if (props.mode === 'transferBySelect') {
+        targetDataKeys.value.forEach(key => {
+          if (dataKeyMap.value.has(key)) {
+            tempKeys.add(key)
+          }
+        })
+        prevSelectedKeys?.forEach(key => {
+          if (!targetDataKeys.value.has(key)) {
+            tempKeys.delete(key)
+          }
+        })
+      }
+
+      setSourceSelectedKeys(Array.from(tempKeys))
+    },
+    { immediate: true },
+  )
+  watch(
+    [targetCheckableDataCount, targetDataKeys, disabledTargetKeys],
+    () => {
+      const tempKeys = new Set(targetSelectedKeys.value)
+
+      targetSelectedKeys.value.forEach(key => {
+        if (!targetDataKeys.value.has(key) || disabledTargetKeys.value.has(key)) {
+          tempKeys.delete(key)
+        }
+      })
+
+      setTargetSelectedKeys(Array.from(tempKeys))
+    },
+    { immediate: true },
+  )
+
+  const handleSourceSelectChange = (keys: VKey[] | Set<VKey>) => {
+    if (props.disabled) {
+      return
+    }
+
+    const currentSelectedKeys = new Set<VKey>(keys)
+
+    if (props.mode === 'transferBySelect') {
+      transferBySelectionChange(sourceSelectedKeySet.value, currentSelectedKeys, transferDataContext)
+    }
+
+    setSourceSelectedKeys((isArray(keys) ? keys : Array.from(keys)).filter(key => !disabledKeys.value.has(key)))
+  }
+  const handleTargetSelectChange = (keys: VKey[] | Set<VKey>) => {
+    if (props.disabled) {
+      return
+    }
+
+    setTargetSelectedKeys(isArray(keys) ? keys : Array.from(keys).filter(key => !disabledKeys.value.has(key)))
+  }
+  const handleSelectAll = (selected = true, isSource = true) => {
+    if (props.disabled) {
+      return
+    }
+
+    const dataKeys = isSource
+      ? props.mode === 'normal'
+        ? sourceDataKeys.value
+        : new Set(dataKeyMap.value.keys())
+      : targetDataKeys.value
+    const _disabledKeys = isSource
+      ? props.mode === 'normal'
+        ? disabledSourceKeys.value
+        : disabledKeys.value
+      : disabledTargetKeys.value
+    const setSelectedKeys = isSource ? setSourceSelectedKeys : setTargetSelectedKeys
+
+    let tempKeys: Set<VKey>
+    if (!selected) {
+      tempKeys = new Set()
+    } else {
+      tempKeys = new Set(dataKeys)
+      _disabledKeys.forEach(key => {
+        tempKeys.delete(key)
+      })
+    }
+
+    if (props.mode === 'transferBySelect' && isSource) {
+      transferBySelectionChange(sourceSelectedKeySet.value, tempKeys, transferDataContext)
+    }
+
+    setSelectedKeys(Array.from(tempKeys))
+    callEmit(props.onSelectAll, isSource, selected)
+  }
+
+  const sourceSelectAllDisabled = computed(() => props.disabled || sourceCheckableDataCount.value <= 0)
+  const targetSelectAllDisabled = computed(() => props.disabled || targetCheckableDataCount.value <= 0)
+
+  return {
+    sourceSelectedKeys,
+    targetSelectedKeys,
+    sourceSelectedKeySet,
+    targetSelectedKeySet,
+    handleSourceSelectChange,
+    handleTargetSelectChange,
+
+    sourceSelectAllStatus,
+    targetSelectAllStatus,
+    handleSourceSelectAll: (selected?: boolean) => handleSelectAll(selected, true),
+    handleTargetSelectAll: (selected?: boolean) => handleSelectAll(selected, false),
+
+    sourceSelectAllDisabled,
+    targetSelectAllDisabled,
+
+    setSourceSelectedKeys,
+    setTargetSelectedKeys,
+  }
+}
+
+function transferBySelectionChange(
+  originalCheckedKeys: Set<VKey>,
+  currentCheckedKeys: Set<VKey>,
+  transferDataContext: TransferDataContext,
+) {
+  const { append, remove } = transferDataContext
+  const appendedKeys: VKey[] = []
+  const removedKeys: VKey[] = []
+
+  for (const key of originalCheckedKeys.values()) {
+    if (!currentCheckedKeys.has(key)) {
+      removedKeys.push(key)
+    }
+  }
+
+  for (const key of currentCheckedKeys.values()) {
+    if (!originalCheckedKeys.has(key)) {
+      appendedKeys.push(key)
+    }
+  }
+
+  if (appendedKeys.length > 0) {
+    append(appendedKeys)
+  }
+
+  if (removedKeys.length > 0) {
+    remove(removedKeys)
+  }
+}
diff --git a/packages/components/transfer/src/list/TransferList.tsx b/packages/components/transfer/src/list/TransferList.tsx
new file mode 100644
index 000000000..7c3298eaf
--- /dev/null
+++ b/packages/components/transfer/src/list/TransferList.tsx
@@ -0,0 +1,79 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import { computed, defineComponent, inject, normalizeClass, normalizeStyle } from 'vue'
+
+import { isBoolean, isNil, isObject } from 'lodash-es'
+
+import { convertCssPixel } from '@idux/cdk/utils'
+import { IxSpin, type SpinProps } from '@idux/components/spin'
+
+import { transferContext } from '../token'
+import { transferListProps } from '../types'
+import TransferListBody from './TransferListBody'
+import TransferListFooter from './TransferListFooter'
+import TransferListHeader from './TransferListHeader'
+
+export default defineComponent({
+  props: transferListProps,
+  setup(props) {
+    const { props: transferProps, mergedPrefixCls } = inject(transferContext)!
+
+    const classes = computed(() => {
+      const prefixCls = `${mergedPrefixCls.value}-list`
+      return normalizeClass({
+        [prefixCls]: true,
+        [`${prefixCls}-${props.isSource ? 'source' : 'target'}`]: true,
+        [`${prefixCls}-virtual`]: transferProps.virtual && transferProps.scroll,
+        [`${prefixCls}-disabled`]: transferProps.disabled,
+      })
+    })
+
+    const style = computed(() => {
+      const scrollWidth = transferProps.scroll?.width
+      let width: string | number | undefined
+      if (isObject(scrollWidth)) {
+        width = props.isSource ? scrollWidth.source : scrollWidth.target
+      } else {
+        width = scrollWidth
+      }
+
+      if (!width) {
+        return
+      }
+
+      return normalizeStyle({
+        width: convertCssPixel(width),
+      })
+    })
+
+    const spinProps = computed<SpinProps | undefined>(() => {
+      if (isNil(transferProps.spin)) {
+        return
+      }
+
+      if (isBoolean(transferProps.spin)) {
+        return { spinning: !!transferProps.spin }
+      }
+
+      return { spinning: props.isSource ? transferProps.spin.source : transferProps.spin.target }
+    })
+
+    return () => {
+      const children = [
+        <TransferListHeader isSource={props.isSource} />,
+        <TransferListBody isSource={props.isSource} />,
+        <TransferListFooter isSource={props.isSource} />,
+      ]
+      return (
+        <div class={classes.value} style={style.value}>
+          {spinProps.value ? <IxSpin {...spinProps.value}>{children}</IxSpin> : children}
+        </div>
+      )
+    }
+  },
+})
diff --git a/packages/components/transfer/src/list/TransferListBody.tsx b/packages/components/transfer/src/list/TransferListBody.tsx
new file mode 100644
index 000000000..27651dd80
--- /dev/null
+++ b/packages/components/transfer/src/list/TransferListBody.tsx
@@ -0,0 +1,108 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import { computed, defineComponent, inject } from 'vue'
+
+import { callEmit } from '@idux/cdk/utils'
+import { ɵCheckableList } from '@idux/components/_private/checkable-list'
+import { ɵEmpty } from '@idux/components/_private/empty'
+
+import { TRANSFER_OPERATIONS_TOKEN, TRANSFER_SOURCE_TOKEN, TRANSFER_TARGET_TOKEN, transferContext } from '../token'
+import { type TransferData, transferListBodyProps } from '../types'
+import { convertToSlotParams } from '../utils'
+
+export default defineComponent({
+  props: transferListBodyProps,
+  setup(props) {
+    const {
+      props: transferProps,
+      slots,
+      mergedPrefixCls,
+      sourceCheckableListRef,
+      targetCheckableListRef,
+      getRowKey,
+    } = inject(transferContext)!
+
+    const transferBindings = props.isSource ? inject(TRANSFER_SOURCE_TOKEN)! : inject(TRANSFER_TARGET_TOKEN)!
+    const { paginatedDataSource, paginatedData, selectedKeySet, disabledKeys, handleSelectChange } = transferBindings
+    const { triggerRemove } = inject(TRANSFER_OPERATIONS_TOKEN)!
+
+    const checkableListRef = props.isSource ? sourceCheckableListRef : targetCheckableListRef
+
+    const handleScroll = (evt: Event) => {
+      callEmit(transferProps.onScroll, props.isSource, evt)
+    }
+    const handleScrolledBottom = () => {
+      callEmit(transferProps.onScrolledBottom, props.isSource)
+    }
+    const handleScrolledChange = (startIndex: number, endIndex: number, visibleData: unknown[]) => {
+      callEmit(transferProps.onScrolledChange, props.isSource, startIndex, endIndex, visibleData)
+    }
+
+    const checkListData = computed(() =>
+      props.isSource && transferProps.mode === 'transferBySelect' ? paginatedDataSource.value : paginatedData.value,
+    )
+
+    const defaultBodyRenderer = (prefixCls: string) => {
+      const data =
+        props.isSource && transferProps.mode === 'transferBySelect' ? paginatedDataSource.value : paginatedData.value
+
+      if (data.length <= 0) {
+        return (
+          <div class={`${prefixCls}-empty-wrapper`}>
+            <ɵEmpty v-slots={slots} empty={transferProps.empty} />
+          </div>
+        )
+      }
+
+      const onCheckChange = (item: TransferData, checked: boolean) => {
+        const key = getRowKey(item)
+        const _checkedKeys = new Set(selectedKeySet.value)
+        checked ? _checkedKeys.add(key) : _checkedKeys.delete(key)
+        handleSelectChange(_checkedKeys)
+      }
+
+      const onRemove = (item: TransferData) => {
+        const key = getRowKey(item)
+        triggerRemove([key])
+      }
+
+      return (
+        <ɵCheckableList
+          ref={checkableListRef}
+          dataSource={checkListData.value}
+          getRowKey={getRowKey}
+          checked={item => selectedKeySet.value.has(getRowKey(item))}
+          disabled={item => transferProps.disabled || disabledKeys.value.has(getRowKey(item))}
+          checkable={props.isSource || transferProps.mode === 'normal'}
+          removable={!props.isSource && transferProps.mode === 'transferBySelect'}
+          virtual={transferProps.virtual}
+          scroll={transferProps.scroll}
+          v-slots={{ label: slots.label }}
+          onCheckChange={onCheckChange}
+          onRemove={onRemove}
+          onScroll={handleScroll}
+          onScrolledChange={handleScrolledChange}
+          onScrolledBottom={handleScrolledBottom}
+        />
+      )
+    }
+
+    const renderBody = (prefixCls: string) => {
+      if (slots.default) {
+        return slots.default({ ...convertToSlotParams(transferBindings), isSource: props.isSource })
+      }
+
+      return defaultBodyRenderer(prefixCls)
+    }
+
+    return () => {
+      const prefixCls = `${mergedPrefixCls.value}-list-body`
+      return <div class={`${mergedPrefixCls.value}-list-body`}>{renderBody(prefixCls)}</div>
+    }
+  },
+})
diff --git a/packages/components/transfer/src/list/TransferListFooter.tsx b/packages/components/transfer/src/list/TransferListFooter.tsx
new file mode 100644
index 000000000..1f1302f88
--- /dev/null
+++ b/packages/components/transfer/src/list/TransferListFooter.tsx
@@ -0,0 +1,59 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import { defineComponent, inject } from 'vue'
+
+import { isArray } from 'lodash-es'
+
+import { IxPagination } from '@idux/components/pagination'
+
+import { TRANSFER_SOURCE_TOKEN, TRANSFER_TARGET_TOKEN, transferContext } from '../token'
+import { transferListFooterProps } from '../types'
+import { convertToSlotParams } from '../utils'
+
+export default defineComponent({
+  props: transferListFooterProps,
+  setup(props) {
+    const { slots, props: transferProps, mergedPrefixCls } = inject(transferContext)!
+    const transferBindings = props.isSource ? inject(TRANSFER_SOURCE_TOKEN)! : inject(TRANSFER_TARGET_TOKEN)!
+    const { pagination, filteredData, filteredDataSource } = transferBindings
+
+    const renderFooter = (prefixCls: string) => {
+      if (slots.footer) {
+        return slots.footer({ ...convertToSlotParams(transferBindings), isSource: props.isSource })
+      }
+
+      if (!pagination.value) {
+        return
+      }
+
+      const total =
+        pagination.value?.total ??
+        (props.isSource && transferProps.mode === 'transferBySelect'
+          ? filteredDataSource.value.length
+          : filteredData.value.length)
+
+      return (
+        <div class={`${prefixCls}-inner`}>
+          <IxPagination class={`${prefixCls}-pagination`} {...pagination.value} total={total} />
+        </div>
+      )
+    }
+
+    return () => {
+      const prefixCls = `${mergedPrefixCls.value}-list-footer`
+
+      const children = renderFooter(prefixCls)
+
+      if (!children || (isArray(children) && children.length <= 0)) {
+        return
+      }
+
+      return <div class={prefixCls}>{children}</div>
+    }
+  },
+})
diff --git a/packages/components/transfer/src/list/TransferListHeader.tsx b/packages/components/transfer/src/list/TransferListHeader.tsx
new file mode 100644
index 000000000..17b4a4b58
--- /dev/null
+++ b/packages/components/transfer/src/list/TransferListHeader.tsx
@@ -0,0 +1,167 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import { type VNodeTypes, defineComponent, inject, normalizeClass, onMounted, ref, watch, withKeys } from 'vue'
+
+import { isArray } from 'lodash-es'
+
+import { useState } from '@idux/cdk/utils'
+import { ɵInput, type ɵInputInstance } from '@idux/components/_private/input'
+import { IxCheckbox } from '@idux/components/checkbox'
+import { IxIcon } from '@idux/components/icon'
+
+import { TRANSFER_OPERATIONS_TOKEN, TRANSFER_SOURCE_TOKEN, TRANSFER_TARGET_TOKEN, transferContext } from '../token'
+import { transferListHeaderProps } from '../types'
+
+export default defineComponent({
+  props: transferListHeaderProps,
+  setup(props) {
+    const { props: transferProps, slots, config, locale, mergedPrefixCls } = inject(transferContext)!
+    const transferBindings = props.isSource ? inject(TRANSFER_SOURCE_TOKEN)! : inject(TRANSFER_TARGET_TOKEN)!
+    const { clearDisabled, triggerClear } = inject(TRANSFER_OPERATIONS_TOKEN)!
+
+    const {
+      showSelectAll,
+      data,
+      selectAllDisabled,
+      selectAllStatus,
+      searchable,
+      searchValue,
+      handleSearchChange,
+      selectAll,
+    } = transferBindings
+
+    const [searchInputValue, setSearchInputValue] = useState<string>('')
+
+    const inputRef = ref<ɵInputInstance>()
+    const syncValue = () => {
+      const element = inputRef.value?.getInputElement()
+      if (element && element.value !== searchValue.value) {
+        element.value = searchValue.value
+      }
+    }
+    onMounted(() => {
+      syncValue()
+    })
+    watch(searchValue, () => {
+      syncValue()
+    })
+    const triggerSearch = () => {
+      handleSearchChange(searchInputValue.value)
+    }
+
+    const handleInput = (evt: Event) => {
+      const value = (evt.target as HTMLInputElement).value
+      setSearchInputValue(value)
+
+      if (!value) {
+        triggerSearch()
+      }
+    }
+    const handleKeyDown = withKeys(() => {
+      triggerSearch()
+    }, ['enter'])
+    const handleCheckChange = (value: boolean | string | number) => {
+      selectAll(!!value)
+    }
+
+    const renderCheckAll = (prefixCls: string) => {
+      if (!showSelectAll.value || (!props.isSource && transferProps.mode === 'transferBySelect')) {
+        return
+      }
+
+      return (
+        <IxCheckbox
+          class={`${prefixCls}-check-all`}
+          checked={selectAllStatus.value.checked}
+          indeterminate={selectAllStatus.value.indeterminate}
+          disabled={selectAllDisabled.value}
+          onChange={handleCheckChange}
+        />
+      )
+    }
+    const renderLabel = (prefixCls: string) => {
+      let children: VNodeTypes
+      if (slots.headerLabel) {
+        children = slots.headerLabel({ data: data.value, isSource: props.isSource })
+      } else {
+        children = `${props.isSource ? locale.toSelect : locale.selected} (${data.value.length})`
+      }
+
+      return <span class={`${prefixCls}-label`}>{children}</span>
+    }
+    const renderInput = (prefixCls: string) => {
+      if (!searchable.value) {
+        return
+      }
+
+      const inputSlots = {
+        suffix: () => <IxIcon class={`${prefixCls}-search-icon`} name="search" onClick={triggerSearch} />,
+      }
+
+      return (
+        <ɵInput
+          ref={inputRef}
+          class={`${prefixCls}-search-input`}
+          v-slots={inputSlots}
+          disabled={transferProps.disabled}
+          type="text"
+          size="sm"
+          placeholder={locale.searchPlaceholder[props.isSource ? 0 : 1]}
+          onInput={handleInput}
+          onKeydown={handleKeyDown}
+        />
+      )
+    }
+    const renderClearIcon = (prefixCls: string) => {
+      if (props.isSource || !(transferProps.clearable ?? config.clearable)) {
+        return
+      }
+
+      const classes = normalizeClass({
+        [`${prefixCls}-clear-icon`]: true,
+        [`${prefixCls}-clear-icon-disabled`]: clearDisabled.value,
+      })
+
+      return (
+        <span class={classes} onClick={triggerClear}>
+          {slots.clearIcon ? slots.clearIcon() : <IxIcon name={transferProps.clearIcon ?? config.clearIcon} />}
+        </span>
+      )
+    }
+
+    const renderSuffix = (prefixCls: string) => {
+      const suffix = slots.headerSuffix?.({ isSource: props.isSource })
+
+      return suffix && <span class={`${prefixCls}-suffix`}>{suffix}</span>
+    }
+
+    const renderHeader = (prefixCls: string) => {
+      return (
+        <div class={`${prefixCls}-inner`}>
+          {renderCheckAll(prefixCls)}
+          {renderLabel(prefixCls)}
+          {renderInput(prefixCls)}
+          {renderClearIcon(prefixCls)}
+          {renderSuffix(prefixCls)}
+        </div>
+      )
+    }
+
+    return () => {
+      const prefixCls = `${mergedPrefixCls.value}-list-header`
+
+      const children = renderHeader(prefixCls)
+
+      if (!children || (isArray(children) && children.length <= 0)) {
+        return
+      }
+
+      return <div class={prefixCls}>{children}</div>
+    }
+  },
+})
diff --git a/packages/components/transfer/src/token.ts b/packages/components/transfer/src/token.ts
new file mode 100644
index 000000000..2824515da
--- /dev/null
+++ b/packages/components/transfer/src/token.ts
@@ -0,0 +1,35 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { GetRowKey } from './composables/useGetRowKey'
+import type { TransferOperationsContext } from './composables/useTransferOperations'
+import type { TransferBindings, TransferDataStrategiesConfig, TransferProps, TransferSlots } from './types'
+import type { ɵCheckableListInstance } from '@idux/components/_private/checkable-list'
+import type { TransferConfig } from '@idux/components/config'
+import type { TransferLocale } from '@idux/components/locales'
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+
+interface TransferContext {
+  mergedPrefixCls: ComputedRef<string>
+  props: TransferProps
+  slots: TransferSlots
+  config: TransferConfig
+  locale: TransferLocale
+  sourceCheckableListRef: Ref<ɵCheckableListInstance | undefined>
+  targetCheckableListRef: Ref<ɵCheckableListInstance | undefined>
+  showSelectAll: ComputedRef<boolean>
+  getRowKey: GetRowKey
+}
+
+export const transferContext: InjectionKey<TransferContext> = Symbol('transferContext')
+
+// public token
+export const TRANSFER_SOURCE_TOKEN: InjectionKey<TransferBindings> = Symbol('TRANSFER_SOURCE_TOKEN')
+export const TRANSFER_TARGET_TOKEN: InjectionKey<TransferBindings> = Symbol('TRANSFER_TARGET_TOKEN')
+export const TRANSFER_OPERATIONS_TOKEN: InjectionKey<TransferOperationsContext> = Symbol('TRANSFER_OPERATIONS_TOKEN')
+export const TRANSFER_DATA_STRATEGIES: InjectionKey<TransferDataStrategiesConfig | null> =
+  Symbol('TRANSFER_DATA_STRATEGIES')
diff --git a/packages/components/transfer/src/types.ts b/packages/components/transfer/src/types.ts
new file mode 100644
index 000000000..ccf41de6d
--- /dev/null
+++ b/packages/components/transfer/src/types.ts
@@ -0,0 +1,181 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { GetRowKey } from './composables/useGetRowKey'
+import type { TransferOperationsContext } from './composables/useTransferOperations'
+import type { ConvertToSlotParams } from './utils'
+import type { VirtualScrollToFn } from '@idux/cdk/scroll'
+import type { ExtractInnerPropTypes, ExtractPublicPropTypes, VKey } from '@idux/cdk/utils'
+import type { ɵCheckableListData } from '@idux/components/_private/checkable-list'
+import type { EmptyProps } from '@idux/components/empty'
+import type { PaginationProps } from '@idux/components/pagination'
+import type { ComputedRef, DefineComponent, HTMLAttributes, Slots, VNode } from 'vue'
+
+import { IxPropTypes } from '@idux/cdk/utils'
+
+export type TransferData = ɵCheckableListData
+
+export interface SeparatedData<T extends TransferData = TransferData> {
+  sourceData: T[]
+  targetData: T[]
+}
+export interface TransferDataStrategiesConfig<T extends TransferData = TransferData> {
+  genDataKeys?: (data: T[], getRowKey: GetRowKey) => Set<VKey>
+  genDataKeyMap?: (dataSource: T[], getRowKey: GetRowKey) => Map<VKey, T>
+  genDisabledKeys?: (data: T[], getRowKey: GetRowKey) => Set<VKey>
+  separateDataSource?: (
+    dataSource: T[],
+    dataKeyMap: Map<VKey, T>,
+    selectedKeySet: Set<VKey>,
+    getRowKey: GetRowKey,
+  ) => SeparatedData<T>
+  dataFilter?: (data: T[], searchValue: string, searchFn: (item: T, searchValue: string) => boolean) => T[]
+  append?: (keys: VKey[], selectedKeySet: Set<VKey>, getRowKey: GetRowKey, handleChange: (keys: VKey[]) => void) => void
+  remove?: (keys: VKey[], selectedKeySet: Set<VKey>, getRowKey: GetRowKey, handleChange: (keys: VKey[]) => void) => void
+}
+export type TransferDataStrategies<T extends TransferData = TransferData> = Required<TransferDataStrategiesConfig<T>>
+
+export type TransferMode = 'normal' | 'transferBySelect'
+
+export interface TransferBindings<T extends TransferData = TransferData> {
+  data: ComputedRef<T[]>
+  filteredData: ComputedRef<T[]>
+  paginatedData: ComputedRef<T[]>
+  dataSource: ComputedRef<T[]>
+  dataKeyMap: ComputedRef<Map<VKey, T>>
+  filteredDataSource: ComputedRef<T[]>
+  paginatedDataSource: ComputedRef<T[]>
+  targetKeySet: ComputedRef<Set<VKey>>
+  selectedKeys: ComputedRef<VKey[]>
+  selectedKeySet: ComputedRef<Set<VKey>>
+  disabledKeys: ComputedRef<Set<VKey>>
+  disabledDataSourceKeys: ComputedRef<Set<VKey>>
+  selectAllDisabled: ComputedRef<boolean>
+  selectAllStatus: ComputedRef<{ checked: boolean; indeterminate: boolean }>
+
+  showSelectAll: ComputedRef<boolean>
+  searchable: ComputedRef<boolean>
+
+  pagination: ComputedRef<PaginationProps | undefined>
+
+  triggerAppend: (keys: VKey[]) => void
+  triggerRemove: (keys: VKey[]) => void
+  getRowKey: GetRowKey
+  handleSelectChange: (keys: Set<VKey> | VKey[]) => void
+  selectAll: (selected?: boolean) => void
+
+  searchValue: ComputedRef<string>
+  handleSearchChange: (value: string) => void
+}
+
+export type TransferListSlotParams<T extends TransferData = TransferData> = ConvertToSlotParams<TransferBindings<T>> & {
+  isSource: boolean
+}
+export type TransferOperationsSlotParams = ConvertToSlotParams<TransferOperationsContext>
+export type TransferSlot<T extends TransferData = TransferData> = (
+  params: TransferListSlotParams<T> & { isSource: boolean },
+) => VNode[]
+
+export interface TransferSlots<T extends TransferData = TransferData> extends Slots {
+  default?: TransferSlot<T>
+  footer?: TransferSlot<T>
+  headerLabel?: (params: { data: T[]; isSource: boolean }) => VNode[]
+  headerSuffix?: (params: { isSource: boolean }) => VNode[]
+  operations?: (operations: TransferOperationsSlotParams) => VNode[]
+  label?: (item: T) => VNode[]
+  empty?: (params: EmptyProps) => VNode[]
+  clearIcon?: () => VNode[]
+}
+
+export interface TransferPaginationType {
+  pageIndex?: [number | undefined, number | undefined] | [number | undefined] | number
+  pageSize?: [number | undefined, number | undefined] | [number | undefined] | number
+  disabled?: boolean
+  total?: [number | undefined, number | undefined] | [number | undefined] | number
+  onChange?: (isSource: boolean, pageIndex: number, pageSize: number) => void
+}
+
+export interface TransferScroll {
+  height?: string | number
+  width?: string | number | { source?: string | number; target?: string | number }
+  fullHeight?: boolean
+}
+
+export type SearchFn<T extends TransferData = TransferData> = (
+  isSource: boolean,
+  item: T,
+  searchValue: string,
+) => boolean
+export const transferProps = {
+  dataSource: IxPropTypes.array<TransferData>().def(() => []),
+  value: IxPropTypes.array<VKey>(),
+  sourceSelectedKeys: IxPropTypes.array<VKey>(),
+  targetSelectedKeys: IxPropTypes.array<VKey>(),
+  disabled: IxPropTypes.bool.def(false),
+  getKey: IxPropTypes.oneOfType([String, IxPropTypes.func<(item: TransferData) => number | string>()]),
+  virtual: IxPropTypes.bool.def(false),
+  scroll: IxPropTypes.object<TransferScroll>(),
+  searchable: IxPropTypes.oneOfType([Boolean, IxPropTypes.object<{ source: boolean; target: boolean }>()]),
+  searchFn: IxPropTypes.func<SearchFn>(),
+  pagination: IxPropTypes.oneOfType([Boolean, IxPropTypes.object<TransferPaginationType>()]),
+
+  mode: IxPropTypes.oneOf<TransferMode>(['normal', 'transferBySelect']).def('normal'),
+  showSelectAll: IxPropTypes.bool,
+
+  spin: IxPropTypes.oneOfType([Boolean, IxPropTypes.object<{ source: boolean; target: boolean }>()]),
+  clearable: IxPropTypes.bool,
+  clearIcon: IxPropTypes.string,
+  empty: IxPropTypes.oneOfType<string | EmptyProps>([String, IxPropTypes.object<EmptyProps>()]),
+
+  //Events
+  'onUpdate:value': IxPropTypes.emit<(keys: VKey[]) => void>(),
+  'onUpdate:sourceSelectedKeys': IxPropTypes.emit<(keys: VKey[]) => void>(),
+  'onUpdate:targetSelectedKeys': IxPropTypes.emit<(keys: VKey[]) => void>(),
+  onChange: IxPropTypes.emit<(keys: VKey[], oldKeys: VKey[]) => void>(),
+  onSearch: IxPropTypes.emit<(isSource: boolean, searchValue: string) => void>(),
+  onSelectAll: IxPropTypes.emit<(isSource: boolean, selectAll: boolean) => void>(),
+  onClear: IxPropTypes.emit<() => void>(),
+
+  onScroll: IxPropTypes.emit<(isSource: boolean, evt: Event) => void>(),
+  onScrolledChange:
+    IxPropTypes.emit<(isSource: boolean, startIndex: number, endIndex: number, visibleData: unknown[]) => void>(),
+  onScrolledBottom: IxPropTypes.emit<(isSource: boolean) => void>(),
+}
+
+export const transferListProps = {
+  isSource: IxPropTypes.bool.isRequired,
+}
+export const transferListBodyProps = transferListProps
+export const transferListHeaderProps = transferListProps
+export const transferListFooterProps = transferListProps
+
+export const transferListItemProps = {
+  checked: IxPropTypes.bool.def(false),
+  checkable: IxPropTypes.bool.isRequired,
+  removable: IxPropTypes.bool.isRequired,
+  disabled: IxPropTypes.bool.def(false),
+  value: IxPropTypes.oneOfType([String, Number, Symbol]).isRequired,
+  onChange: IxPropTypes.emit<(value: boolean) => void>(),
+  onRemove: IxPropTypes.emit<() => void>(),
+}
+
+export interface TransferScrollTo {
+  (isSource?: boolean): ReturnType<VirtualScrollToFn>
+  (options: Parameters<VirtualScrollToFn>[0], isSource?: boolean): ReturnType<VirtualScrollToFn>
+}
+
+export interface TransferApis {
+  scrollTo: TransferScrollTo
+}
+
+export type TransferProps = ExtractInnerPropTypes<typeof transferProps>
+export type TransferPublicProps = ExtractPublicPropTypes<typeof transferProps>
+export type TransferComponent = DefineComponent<
+  Omit<HTMLAttributes, keyof TransferPublicProps> & TransferPublicProps,
+  TransferApis
+>
+export type TransferInstance = InstanceType<DefineComponent<TransferProps, TransferApis>>
diff --git a/packages/components/transfer/src/utils.ts b/packages/components/transfer/src/utils.ts
new file mode 100644
index 000000000..a0dd45a50
--- /dev/null
+++ b/packages/components/transfer/src/utils.ts
@@ -0,0 +1,21 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import { type UnwrapRef, unref } from 'vue'
+
+export type ConvertToSlotParams<T> = {
+  [key in keyof T]: UnwrapRef<T[key]>
+}
+export function convertToSlotParams<T = Record<string, unknown>>(obj: T): ConvertToSlotParams<T> {
+  const params: Record<string, unknown> = {}
+
+  Object.keys(obj).forEach(key => {
+    params[key] = unref(obj[key as keyof T])
+  })
+
+  return params as ConvertToSlotParams<T>
+}
diff --git a/packages/components/transfer/style/index.less b/packages/components/transfer/style/index.less
new file mode 100644
index 000000000..d6508609c
--- /dev/null
+++ b/packages/components/transfer/style/index.less
@@ -0,0 +1,34 @@
+@import '../../style/mixins/reset.less';
+
+.@{transfer-prefix} {
+  .reset-component();
+
+  display: flex;
+  align-items: stretch;
+  color: @transfer-color;
+
+  &-operations {
+    min-width: @transfer-operations-min-width;
+    flex-shrink: 0;
+    &-inner {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: @transfer-operations-padding;
+    }
+
+    & &-btn {
+      width: @transfer-operations-btn-width;
+      height: @transfer-operations-btn-height;
+      padding: 0;
+    }
+
+    &-btn + &-btn {
+      margin-top: @transfer-operations-btn-gap;
+    }
+  }
+}
+
+@import './list.less';
\ No newline at end of file
diff --git a/packages/components/transfer/style/list.less b/packages/components/transfer/style/list.less
new file mode 100644
index 000000000..9bf18db04
--- /dev/null
+++ b/packages/components/transfer/style/list.less
@@ -0,0 +1,118 @@
+.@{transfer-prefix}-list {
+  width: @transfer-list-width;
+  height: @transfer-list-height;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border: 1px solid @transfer-list-border-color;
+  border-radius: @transfer-list-border-radius;
+  color: @transfer-color;
+  background-color: @transfer-list-background-color;
+
+  &.@{transfer-prefix}-list-virtual {
+    height: auto;
+  }
+
+  &-disabled {
+    opacity: 0.6;
+  }
+
+  & .@{spin-prefix} {
+    height: 100%;
+
+    &-container {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  &-header {
+    width: 100%;
+    height: @transfer-list-header-height;
+    padding: @transfer-list-header-padding;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    border-bottom: 1px solid @transfer-list-border-color;
+
+    &-check-all + &-label {
+      margin-left: @spacing-xs;
+    }
+
+    &-inner {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+    }
+
+    &-search-input {
+      width: @transer-search-width;
+      margin-left: auto;
+    }
+    &-search-icon {
+      cursor: pointer;
+    }
+    &-clear-icon {
+      margin-left: auto;
+      font-size: @transfer-clear-icon-font-size;
+      color: @transfer-icon-color;
+      &:hover:not(&-disabled) {
+        color: @transfer-icon-hover-color;
+      }
+      &:focus:not(&-disabled),
+      &:active:not(&-disabled) {
+        color: @transfer-icon-active-color;
+      }
+
+      cursor: pointer;
+
+      &-disabled {
+        color: @transfer-disabled-color;
+        cursor: not-allowed;
+      }
+    }
+
+    &-suffix {
+      margin-left: auto;
+    }
+    &-clear-icon + &-suffix,
+    &-search-input + &-suffix {
+      margin-left: @transfer-list-header-suffix-margin-left;
+    }
+  }
+
+  &-body {
+    width: 100%;
+    flex: auto;
+    overflow: hidden;
+
+    &-empty-wrapper {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &-footer {
+    width: 100%;
+    height: @transfer-list-footer-height;
+    padding: @transfer-list-footer-padding;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    border-top: 1px solid @transfer-list-border-color;
+
+    &-inner {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/components/transfer/style/themes/default.less b/packages/components/transfer/style/themes/default.less
new file mode 100644
index 000000000..00f3aac53
--- /dev/null
+++ b/packages/components/transfer/style/themes/default.less
@@ -0,0 +1,4 @@
+@import '../../../style/themes/default.less';
+@import '../../../form/style/themes/default.variable.less';
+@import '../index.less';
+@import './default.variable.less';
diff --git a/packages/components/transfer/style/themes/default.ts b/packages/components/transfer/style/themes/default.ts
new file mode 100644
index 000000000..c051ab970
--- /dev/null
+++ b/packages/components/transfer/style/themes/default.ts
@@ -0,0 +1,11 @@
+// style dependencies
+import '@idux/components/_private/checkable-list/style/default'
+import '@idux/components/style/core/default'
+import '@idux/components/checkbox/style/themes/default'
+import '@idux/components/empty/style/themes/default'
+import '@idux/components/icon/style/themes/default'
+import '@idux/components/pagination/style/themes/default'
+import '@idux/components/spin/style/themes/default'
+import '@idux/components/input/style/themes/default'
+
+import './default.less'
diff --git a/packages/components/transfer/style/themes/default.variable.less b/packages/components/transfer/style/themes/default.variable.less
new file mode 100644
index 000000000..1bd2cff2a
--- /dev/null
+++ b/packages/components/transfer/style/themes/default.variable.less
@@ -0,0 +1,30 @@
+@import '../../../style/themes/default.less';
+
+@transfer-list-width: 260px;
+@transfer-list-height: 290px;
+@transfer-list-border-color: @form-border-color;
+@transfer-list-border-radius: 2px;
+@transfer-list-background-color: @form-background-color;
+
+@transfer-color: @text-color;
+@transfer-disabled-color: @text-color-disabled;
+
+@transfer-list-header-height: @height-lg;
+@transfer-list-header-suffix-margin-left: @spacing-md;
+@transfer-list-footer-height: @height-lg;
+
+@transfer-list-header-padding: 0 @spacing-md;
+@transfer-list-footer-padding: 0 @spacing-sm;
+
+@transfer-operations-min-width: @spacing-xs;
+@transfer-operations-padding: @spacing-sm;
+@transfer-operations-btn-width: 24px;
+@transfer-operations-btn-height: 32px;
+@transfer-operations-btn-gap: @spacing-sm;
+
+@transer-search-width: 110px;
+
+@transfer-clear-icon-font-size: @font-size-md;
+@transfer-icon-color: @color-graphite-d20;
+@transfer-icon-hover-color: @color-primary;
+@transfer-icon-active-color: @color-primary;
\ No newline at end of file
diff --git a/packages/components/types.d.ts b/packages/components/types.d.ts
index 453c063a3..3dcee514f 100644
--- a/packages/components/types.d.ts
+++ b/packages/components/types.d.ts
@@ -68,6 +68,7 @@ import type { TextareaComponent } from '@idux/components/textarea'
 import type { TimePickerComponent } from '@idux/components/time-picker'
 import type { TimelineComponent, TimelineItemComponent } from '@idux/components/timeline'
 import type { TooltipComponent } from '@idux/components/tooltip'
+import type { TransferComponent } from '@idux/components/transfer'
 import type { TreeComponent } from '@idux/components/tree'
 import type { UploadComponent, UploadFilesComponent } from '@idux/components/upload'
 
@@ -153,6 +154,7 @@ declare module 'vue' {
     IxTimeline: TimelineComponent
     IxTimelineItem: TimelineItemComponent
     IxTimePicker: TimePickerComponent
+    IxTransfer: TransferComponent
     IxTooltip: TooltipComponent
     IxTree: TreeComponent
     IxUpload: UploadComponent
diff --git a/scripts/gulp/icons/assets/clear.svg b/scripts/gulp/icons/assets/clear.svg
index 6bea3f1d3..5aac09f2e 100644
--- a/scripts/gulp/icons/assets/clear.svg
+++ b/scripts/gulp/icons/assets/clear.svg
@@ -1 +1 @@
-<svg viewBox="64 64 896 896" focusable="false"><path d="M960 332.8v166.4a12.8 12.8 0 0 1-12.8 12.8H140.8a12.8 12.8 0 0 1-12.8-12.8V332.8c0-7.04 5.76-12.8 12.8-12.8h806.4c7.04 0 12.8 5.76 12.8 12.8zM896 384H192v64h704v-64z"/><path d="M627.2 64c7.04 0 12.8 5.76 12.8 12.8v294.4a12.8 12.8 0 0 1-12.8 12.8H460.8a12.8 12.8 0 0 1-12.8-12.8V76.8c0-7.04 5.76-12.8 12.8-12.8h166.4zM576 128h-64v192h64V128zm256 320 124.032 496.064A12.8 12.8 0 0 1 943.616 960H144.384a12.8 12.8 0 0 1-12.416-15.936L256 448h576zm-50.048 64H305.984l-96 384h667.968l-96-384z"/><path d="m389.504 663.744 61.824 16.512-68.096 256-61.824-16.512z"/></svg>
\ No newline at end of file
+<svg viewBox="64 64 896 896" focusable="false"><path d="M243.2 320c7.04 0 12.8 5.76 12.8 12.8V896h512V332.8c0-7.04 5.76-12.8 12.8-12.8h38.4c7.04 0 12.8 5.76 12.8 12.8v614.08a12.8 12.8 0 0 1-12.8 12.8H204.8a12.8 12.8 0 0 1-12.8-12.8V332.8c0-7.04 5.76-12.8 12.8-12.8h38.4zm512-256c7.04 0 12.8 5.76 12.8 12.8V192h179.2c7.04 0 12.8 5.76 12.8 12.8v38.4a12.8 12.8 0 0 1-12.8 12.8H76.8A12.8 12.8 0 0 1 64 243.2v-38.4c0-7.04 5.76-12.8 12.8-12.8H256V76.8c0-7.04 5.76-12.8 12.8-12.8h486.4zm-50.752 64h-383.68l-.128 64h383.68v-64z"/></svg>
\ No newline at end of file
diff --git a/scripts/gulp/icons/assets/left-double.svg b/scripts/gulp/icons/assets/left-double.svg
new file mode 100644
index 000000000..45a6821de
--- /dev/null
+++ b/scripts/gulp/icons/assets/left-double.svg
@@ -0,0 +1 @@
+<svg viewBox="64 64 896 896" focusable="false"><path d="M533.504 265.344a32 32 0 0 1 0 45.312L342.336 501.76a12.8 12.8 0 0 0 0 18.112l192.512 192.512a32 32 0 0 1-45.248 45.248L265.344 533.504a32 32 0 0 1 0-45.248L488.32 265.344a32 32 0 0 1 45.248 0zm224 0a32 32 0 0 1 0 45.312L566.336 501.76a12.8 12.8 0 0 0 0 18.112l192.512 192.512a32 32 0 1 1-45.248 45.248L489.344 533.504a32 32 0 0 1 0-45.248l222.912-222.912a32 32 0 0 1 45.248 0z"/></svg>
\ No newline at end of file
diff --git a/scripts/gulp/icons/assets/right-double.svg b/scripts/gulp/icons/assets/right-double.svg
new file mode 100644
index 000000000..6af3a089f
--- /dev/null
+++ b/scripts/gulp/icons/assets/right-double.svg
@@ -0,0 +1 @@
+<svg viewBox="64 64 896 896" focusable="false"><path d="M490.752 265.344a32 32 0 0 0 0 45.312L681.92 501.824a12.8 12.8 0 0 1 0 18.112L489.344 712.448a32 32 0 0 0 45.312 45.248l224.192-224.192a32 32 0 0 0 0-45.248L536 265.344a32 32 0 0 0-45.248 0zm-224 0a32 32 0 0 0 0 45.312L457.92 501.76a12.8 12.8 0 0 1 0 18.112L265.344 712.384a32 32 0 1 0 45.312 45.248L534.848 533.44a32 32 0 0 0 0-45.248L312 265.344a32 32 0 0 0-45.248 0z"/></svg>
\ No newline at end of file