TransferList
Search, select, and move items between two lists.
Live TypeScript example
Try the component here, then use the source below in your application.
Select items and move them between the lists.
import '@bluui/web/styles.css'
import { createTransferList } from "@bluui/web";
export function mount(host: HTMLElement) {
return createTransferList(
host,
{
AvailableLabel: "Available permissions",
SelectedLabel: "Assigned permissions",
SelectedKeys: ["read"],
Items: [
{ Key: "read", Label: "Read records" },
{ Key: "edit", Label: "Edit records" },
{
Key: "export",
Label: "Export records",
Description: "Download a report.",
},
{ Key: "admin", Label: "Administration", IsDisabled: true },
],
},
{
SelectionChanged: (keys) => {
host.dataset.selected = keys.join(",");
},
},
);
}
const instance = mount(document.getElementById('example')!)
// When this page or framework component is removed:
// instance.destroy()
Install the library and add the host element
npm install https://bluui.blutekmedia.com/downloads/bluui-web-0.2.6.tgz<div id="example"></div>This example uses the downloadable @bluui/web package. Your application handles persistence and authentication through its typed callbacks. The starter ZIP includes this same example.
This reference documents the published Block’s parameters, events, and types. The web examples adapt those inputs to browser callbacks. Open native showcase ↗
- Web examples
- Supported4 states checked · no automated failures
- TypeScript
- Supported2 states checked · no automated failures
- OutSystems
- Needs work2 states checked · 2 rule failures
Minimum requirement: WCAG 2.1 AA. Supported means the listed checks passed; full conformance is not yet declared.
Evidence and remaining verification →Purpose and use
Use a transfer list when people need to build a selection from a known set, such as assigning permissions or team members.
Keyboard design guidance
Tab moves between search fields, checkboxes, and transfer buttons. Space marks an item; Enter activates a move. Disabled items stay in place.
This describes the intended interaction. The dated audit above identifies verified behavior and current gaps.
In your application
Provide useful labels, preserve visible focus, and test the component with your actual content. Use text alongside status colors and check contrast in each state.
Events0No events yet.
Interact with an example to see its events.