Paste-to-Select Transfer

ProNew

A transfer list with a paste box: paste a list of names, and the matching items move across while the names that matched nothing are reported back. Use this when people already hold the list in a spreadsheet or an email.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it for invitations, group membership and bulk assignment where the names come from somewhere else.

Do not use it when the source of truth is a file (use an uploader with a preview) or when labels are not unique.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`items`	`TransferItem[]`	-	Everyone who can be chosen; labels are matched.
`titles`	`[string, string]`	`["Available", "Selected"]`	List names.
`defaultValue`	`string[]`	`[]`	Items on the right.
`onValueChange`	`(ids) => void`	-	Called when names are added or moved.

Accessibility

The paste box has a visible label that says how names can be separated.
The result is a status message: how many were added, already there and not found; unknown names stay in the box.
The lists below keep their keyboard model and announcements.

Testing

The pattern ships with a Testing Library test (paste-to-select-transfer.test.tsx) that covers the matching rules, the report and what stays in the box.

Guide and examples

When to use it

Use it for invitations, group membership and bulk assignment where the names come from somewhere else.

Do not use it when the source of truth is a file (use an uploader with a preview) or when labels are not unique.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`items`	`TransferItem[]`	-	Everyone who can be chosen; labels are matched.
`titles`	`[string, string]`	`["Available", "Selected"]`	List names.
`defaultValue`	`string[]`	`[]`	Items on the right.
`onValueChange`	`(ids) => void`	-	Called when names are added or moved.

Accessibility

The paste box has a visible label that says how names can be separated.
The result is a status message: how many were added, already there and not found; unknown names stay in the box.
The lists below keep their keyboard model and announcements.

Testing

The pattern ships with a Testing Library test (paste-to-select-transfer.test.tsx) that covers the matching rules, the report and what stays in the box.