Data Entryduskmoonimplemented7 demos

Transfer

Transfer moves records between available and selected lists.

Import@duskmoon-dev/components/transfer

14API sections

54documented props

5behavior scenarios

Key API

dataSourcetargetKeysdefaultTargetKeysselectedKeysdefaultSelectedKeysrender

Usage

When to use

Use it when users need to scan structured content and act on individual records.
Prefer it over ad hoc markup when the content has repeatable fields, hierarchy, or navigation state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Structured records

Designed for repeated or hierarchical content where users scan, compare, and inspect details.

Stateful interactions

Documents the props that control sorting, selection, expansion, pagination, or value changes where available.

Primary API surface

Transfer is most often configured through `dataSource`, `targetKeys`, `defaultTargetKeys`, `selectedKeys`.

Covered behavior

Renders source and target lists with titles

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Available1 / 3

Selected0 / 1

Basic usage

authored

Import the component stylesheet and Transfer from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Transfer } from "@duskmoon-dev/components/transfer";

export function Example() {
  return (<Transfer
  dataSource={[
    { key: "tokens", title: "Design tokens", description: "Theme primitives" },
    { key: "docs", title: "Docs site", description: "Examples and API pages" },
    { key: "qa", title: "Visual QA", description: "Review queue" },
    { key: "release", title: "Release notes", description: "Publish checklist" }
  ]}
  defaultTargetKeys={["release"]}
  defaultSelectedKeys={["tokens"]}
  titles={["Available", "Selected"]}
  showSearch
/>);
}

Preview

Available1 / 3

Selected0 / 1

Renders source and target lists with titles

test-backed

Transfer scenario from the component test coverage: renders source and target lists with titles.

Source

import "@duskmoon-dev/components/styles.css";
import { Transfer } from "@duskmoon-dev/components/transfer";

export function TransferRendersSourceAndTargetDemo() {
  return (<Transfer
  dataSource={[
    { key: "tokens", title: "Design tokens", description: "Theme primitives" },
    { key: "docs", title: "Docs site", description: "Examples and API pages" },
    { key: "qa", title: "Visual QA", description: "Review queue" },
    { key: "release", title: "Release notes", description: "Publish checklist" }
  ]}
  defaultTargetKeys={["release"]}
  defaultSelectedKeys={["tokens"]}
  titles={["Available", "Selected"]}
  showSearch
/>);
}

Preview

Available1 / 3

Selected0 / 1

Moves selected source items to target

test-backed

Transfer scenario from the component test coverage: moves selected source items to target.

Source

import "@duskmoon-dev/components/styles.css";
import { Transfer } from "@duskmoon-dev/components/transfer";

export function TransferMovesSelectedSourceItemsDemo() {
  return (<Transfer
  dataSource={[
    { key: "tokens", title: "Design tokens", description: "Theme primitives" },
    { key: "docs", title: "Docs site", description: "Examples and API pages" },
    { key: "qa", title: "Visual QA", description: "Review queue" },
    { key: "release", title: "Release notes", description: "Publish checklist" }
  ]}
  defaultTargetKeys={["release"]}
  defaultSelectedKeys={["tokens"]}
  titles={["Available", "Selected"]}
  showSearch
/>);
}

Preview

Available1 / 3

Selected0 / 1

Supports selectedKeys and select change callbacks

test-backed

Transfer scenario from the component test coverage: supports selectedkeys and select change callbacks.

Source

import "@duskmoon-dev/components/styles.css";
import { Transfer } from "@duskmoon-dev/components/transfer";

export function TransferSupportsSelectedKeysAndSelectDemo() {
  return (<Transfer
  dataSource={[
    { key: "tokens", title: "Design tokens", description: "Theme primitives" },
    { key: "docs", title: "Docs site", description: "Examples and API pages" },
    { key: "qa", title: "Visual QA", description: "Review queue" },
    { key: "release", title: "Release notes", description: "Publish checklist" }
  ]}
  defaultTargetKeys={["release"]}
  defaultSelectedKeys={["tokens"]}
  titles={["Available", "Selected"]}
  showSearch
/>);
}

Preview

Available1 / 3

Selected0 / 1

Supports search, render object, filter, and pagination

test-backed

Transfer scenario from the component test coverage: supports search, render object, filter, and pagination.

Source

import "@duskmoon-dev/components/styles.css";
import { Transfer } from "@duskmoon-dev/components/transfer";

export function TransferSupportsSearchRenderObjectDemo() {
  return (<Transfer
  dataSource={[
    { key: "tokens", title: "Design tokens", description: "Theme primitives" },
    { key: "docs", title: "Docs site", description: "Examples and API pages" },
    { key: "qa", title: "Visual QA", description: "Review queue" },
    { key: "release", title: "Release notes", description: "Publish checklist" }
  ]}
  defaultTargetKeys={["release"]}
  defaultSelectedKeys={["tokens"]}
  titles={["Available", "Selected"]}
  showSearch
/>);
}

Preview

Available1 / 3

Selected0 / 1

Supports oneWay, disabled state, rowKey, and subcomponents

test-backed

Transfer scenario from the component test coverage: supports oneway, disabled state, rowkey, and subcomponents.

Source

import "@duskmoon-dev/components/styles.css";
import { Transfer } from "@duskmoon-dev/components/transfer";

export function TransferSupportsOneWayDisabledStateDemo() {
  return (<Transfer
  dataSource={[
    { key: "tokens", title: "Design tokens", description: "Theme primitives" },
    { key: "docs", title: "Docs site", description: "Examples and API pages" },
    { key: "qa", title: "Visual QA", description: "Review queue" },
    { key: "release", title: "Release notes", description: "Publish checklist" }
  ]}
  defaultTargetKeys={["release"]}
  defaultSelectedKeys={["tokens"]}
  titles={["Available", "Selected"]}
  showSearch
/>);
}

Preview

Sunshine Theme

Available1 / 3

Selected0 / 1

Moonlight Theme

Available1 / 3

Selected0 / 1

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Transfer
  dataSource={[
    { key: "tokens", title: "Design tokens", description: "Theme primitives" },
    { key: "docs", title: "Docs site", description: "Examples and API pages" },
    { key: "qa", title: "Visual QA", description: "Review queue" },
    { key: "release", title: "Release notes", description: "Publish checklist" }
  ]}
  defaultTargetKeys={["release"]}
  defaultSelectedKeys={["tokens"]}
  titles={["Available", "Selected"]}
  showSearch
/>
</div>

<div data-theme="moonlight">
  <Transfer
  dataSource={[
    { key: "tokens", title: "Design tokens", description: "Theme primitives" },
    { key: "docs", title: "Docs site", description: "Examples and API pages" },
    { key: "qa", title: "Visual QA", description: "Review queue" },
    { key: "release", title: "Release notes", description: "Publish checklist" }
  ]}
  defaultTargetKeys={["release"]}
  defaultSelectedKeys={["tokens"]}
  titles={["Available", "Selected"]}
  showSearch
/>
</div>

API

The API reference below lists every parsed exported type or interface for Transfer. Start with `dataSource`, `targetKeys`, `defaultTargetKeys`, `selectedKeys` for common usage.

Types: packages/components/src/components/transfer/Transfer.types.tsScenarios: packages/components/src/components/transfer/Transfer.test.tsx

TransferPropsinterface extends < T extends TransferItem = TransferItem, > extends Omit<ComponentProps<"div">, "children" | "onChange" | "title">

Prop	Type	Required	Description
`dataSource`	`T[]`	No	dataSource configures Transfer.
`targetKeys`	`TransferKey[]`	No	targetKeys configures Transfer.
`defaultTargetKeys`	`TransferKey[]`	No	defaultTargetKeys configures Transfer.
`selectedKeys`	`TransferKey[]`	No	selectedKeys configures Transfer.
`defaultSelectedKeys`	`TransferKey[]`	No	defaultSelectedKeys configures Transfer.
`render`	`TransferRender<T>`	No	render configures Transfer.
`showSearch`	`boolean`	No	showSearch configures Transfer.
`filterOption`	`TransferFilterOption<T>`	No	filterOption configures Transfer.
`pagination`	`boolean \| TransferPaginationConfig`	No	pagination configures Transfer.
`oneWay`	`boolean`	No	oneWay configures Transfer.
`operations`	`ReactNode[]`	No	operations configures Transfer.
`titles`	`ReactNode[]`	No	titles configures Transfer.
`disabled`	`boolean`	No	disabled configures Transfer.
`rowKey`	`(item: T) => TransferKey`	No	rowKey configures Transfer.
`locale`	`TransferLocale`	No	locale configures Transfer.
`onChange`	`(`	No	onChange configures Transfer.
`targetKeys`	`TransferKey[],`	Yes	targetKeys configures Transfer.
`direction`	`TransferDirection,`	Yes	direction configures Transfer.
`moveKeys`	`TransferKey[],`	Yes	moveKeys configures Transfer.
`onSelectChange`	`(`	No	onSelectChange configures Transfer.
`sourceSelectedKeys`	`TransferKey[],`	Yes	sourceSelectedKeys configures Transfer.
`targetSelectedKeys`	`TransferKey[],`	Yes	targetSelectedKeys configures Transfer.
`onSearch`	`(direction: TransferDirection, value: string) => void`	No	onSearch configures Transfer.

TransferIteminterface

Prop	Type	Required	Description
`key`	`TransferKey`	Yes	key configures Transfer.
`title`	`ReactNode`	No	title configures Transfer.
`description`	`ReactNode`	No	description configures Transfer.
`disabled`	`boolean`	No	disabled configures Transfer.

TransferPaginationConfiginterface

Prop	Type	Required	Description
`pageSize`	`number`	No	pageSize configures Transfer.

TransferLocaleinterface

Prop	Type	Required	Description
`itemUnit`	`string`	No	itemUnit configures Transfer.
`itemsUnit`	`string`	No	itemsUnit configures Transfer.
`notFoundContent`	`ReactNode`	No	notFoundContent configures Transfer.
`searchPlaceholder`	`string`	No	searchPlaceholder configures Transfer.

TransferListPropsinterface extends < T extends TransferItem = TransferItem, > extends Omit<ComponentProps<"div">, "children" | "title">

Prop	Type	Required	Description
`direction`	`TransferDirection`	Yes	direction configures Transfer.
`title`	`ReactNode`	No	title configures Transfer.
`items`	`T[]`	Yes	items configures Transfer.
`selectedKeys`	`TransferKey[]`	No	selectedKeys configures Transfer.
`disabled`	`boolean`	No	disabled configures Transfer.
`showSearch`	`boolean`	No	showSearch configures Transfer.
`searchValue`	`string`	No	searchValue configures Transfer.
`searchPlaceholder`	`string`	No	searchPlaceholder configures Transfer.
`notFoundContent`	`ReactNode`	No	notFoundContent configures Transfer.
`render`	`TransferRender<T>`	No	render configures Transfer.
`filterOption`	`TransferFilterOption<T>`	No	filterOption configures Transfer.
`pagination`	`boolean \| TransferPaginationConfig`	No	pagination configures Transfer.
`onSearch`	`(direction: TransferDirection, value: string) => void`	No	onSearch configures Transfer.
`onItemSelect`	`(key: TransferKey, selected: boolean) => void`	No	onItemSelect configures Transfer.

TransferSearchPropsinterface extends Omit< ComponentProps<"input">, "onChange" | "size" >

Prop	Type	Required	Description
`onChange`	`(value: string) => void`	No	onChange configures Transfer.

TransferOperationPropsinterface extends Omit< ComponentProps<"div">, "children" >

Prop	Type	Required	Description
`disabled`	`boolean`	No	disabled configures Transfer.
`oneWay`	`boolean`	No	oneWay configures Transfer.
`operations`	`ReactNode[]`	No	operations configures Transfer.
`moveToRightDisabled`	`boolean`	No	moveToRightDisabled configures Transfer.
`moveToLeftDisabled`	`boolean`	No	moveToLeftDisabled configures Transfer.
`onMoveToRight`	`() => void`	No	onMoveToRight configures Transfer.
`onMoveToLeft`	`() => void`	No	onMoveToLeft configures Transfer.

TransferDirectiontype

"left" | "right"

TransferKeytype

string

TransferRenderResulttype

| ReactNode | { label: ReactNode

TransferSearchComponenttype

ForwardRefExoticComponent< TransferSearchProps & RefAttributes<HTMLInputElement> >

TransferOperationComponenttype

ForwardRefExoticComponent< TransferOperationProps & RefAttributes<HTMLDivElement> >

TransferListComponenttype

<T extends TransferItem = TransferItem>( props: TransferListProps<T> & RefAttributes<HTMLDivElement>, ) => ReactElement | null

TransferComponenttype

(<T extends TransferItem = TransferItem>( props: TransferProps<T> & RefAttributes<HTMLDivElement>, ) => ReactElement | null) & { Search: TransferSearchComponent