Forms

Transfer

Moves selected items between available and chosen collections.

View preview API reference Figma behavior note

FrameworksAstro · React · Elements

Registry commandlumen add Transfer

InteractionNative markup

Design sourceBehavior-only contract

See it and copy it

Framework example

Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.

Source

Item 1
Item 2

Target

Framework usage

Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens and ui-* class contract.

---
import { Transfer } from '@santi020k/lumen-astro'
---

<Transfer
  sourceTitle="Source"
  targetTitle="Target"
  items={[{ key: '1', label: 'Item 1' }, { key: '2', label: 'Item 2' }]}
/>

import { Transfer } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <Transfer
      sourceTitle="Source"
      targetTitle="Target"
      items={[{ key: '1', label: 'Item 1' }, { key: '2', label: 'Item 2' }]}
    />
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-transfer
  sourceTitle="Source"
  targetTitle="Target"
  items={[{ key: '1', label: 'Item 1' }, { key: '2', label: 'Item 2' }]}></lumen-transfer>

Edit Transfer in browser

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

pnpm add @santi020k/lumen-astro

pnpm add @santi020k/lumen-astro

lumen add Transfer

lumen add Transfer

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add Transfer --target react

lumen add Transfer --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add Transfer --target elements

lumen add Transfer --target elements

API reference

Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.

Attribute	Values	Default	Description
items, targetItems	TransferItem[]	[]	Defines the available and initially chosen collections.
sourceTitle, targetTitle	string	"Available", "Selected"	Labels the two collections.
name	string	-	Sets the submitted values field name.
class, className	string	""	Merges custom classes with the generated ui-* root classes.
...native attributes	HTML attributes	-	Forwards standard attributes to the root element unless the component consumes them.