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