Eidetic Design System

Preview

Simple dual-list transfer with search functionality

Available Items

8 items

React

JavaScript library for building UIs

Next.js

React framework for production

TypeScript

Typed superset of JavaScript

Tailwind CSS

Utility-first CSS framework

Node.js

JavaScript runtime

MongoDB

NoSQL database

PostgreSQL

Relational database

GraphQL

Query language for APIs

Selected Items

0 items

No items

With Initial Selection

Transfer component with pre-selected items

Without Search

Disable search functionality for simple transfers

One-way Transfer

Only allow moving items from source to target

Available Skills

5 items

React

JavaScript library for building UIs

Next.js

React framework for production

TypeScript

Typed superset of JavaScript

Tailwind CSS

Utility-first CSS framework

Node.js

JavaScript runtime

Required Skills

0 items

No items

Custom List Height

Adjust list height for different content amounts

Props

Transfer component API reference

Prop	Type	Default	Description
`dataSource`	`TransferItem[]`	—	All available items
`targetKeys`	`string[]`	—	Keys of selected items
`onChange`	`(keys: string[]) => void`	—	Callback when selection changes
`titles`	`[string, string]`	`['Source', 'Target']`	List titles
`searchable`	`boolean`	`true`	Enable search
`oneWay`	`boolean`	`false`	One-way transfer only
`listHeight`	`number`	`300`	List height in pixels
`showSelectAll`	`boolean`	`true`	Show select all checkbox

TransferItem Type

interface TransferItem {
 key: string // Unique identifier
 title: string // Item display text
 description?: string // Optional description
 disabled?: boolean // Disable item selection
}

Usage

Import and implementation example

import { Transfer, TransferItem } from '@/components/ui/transfer'

export default function Example() {
 const [targetKeys, setTargetKeys] = useState<string[]>([])

 const data: TransferItem[] = [
 { key: '1', title: 'Item 1', description: 'Description' },
 { key: '2', title: 'Item 2' },
 { key: '3', title: 'Disabled Item', disabled: true },
 ]

 return (
 <>
 {/* Basic usage */}
 <Transfer
 dataSource={data}
 targetKeys={targetKeys}
 onChange={setTargetKeys}
 titles={['Available', 'Selected']}
 />

 {/* Without search */}
 <Transfer
 dataSource={data}
 targetKeys={targetKeys}
 onChange={setTargetKeys}
 searchable={false}
 />

 {/* One-way transfer */}
 <Transfer
 dataSource={data}
 targetKeys={targetKeys}
 onChange={setTargetKeys}
 oneWay={true}
 />

 {/* Custom height */}
 <Transfer
 dataSource={data}
 targetKeys={targetKeys}
 onChange={setTargetKeys}
 listHeight={200}
 />
 </>
 )
}

Features

Built-in functionality

Dual-list interface: Source and target lists side by side
Search filtering: Filter items by title
Select all: Bulk select all visible items
Bidirectional transfer: Move items in both directions
One-way mode: Restrict to source-to-target only
Disabled items: Prevent specific items from being moved
Custom titles: Label each list appropriately
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Lists use proper role="listbox"Items use role="option"Selected state communicated via aria-selected

Keyboard Navigation

Key	Action
`Tab`	Navigate between controls
`Space`	Select/deselect item
`Enter`	Trigger transfer buttons
`Arrow Keys`	Navigate items in list

Notes

Transfer buttons indicate direction
Search input is properly labeled
Selection count shown in header
Disabled items are skipped in navigation

Transfer