Choose the coverage
Assigned areas
Mark places, then move them between the available and selected lists.
Transfer list
Assigns options between available and selected lists using native checkboxes and explicit move actions.
Preview
In action
When to use
Use it for
- Assigning a visible subset from a manageable option list.
- Work where available and assigned options should stay visible together.
Not for
- Very large lists; use searchable MultiSelect.
- Ordering selected records; use SortableList.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { TransferList } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/transfer-list.
2. Vendor the source
npx @noorddev/vlak-cli add transfer-list
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/transfer-list.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { TransferList } from "@noorddev/vlak-react";
<TransferList label="Coverage areas" name="areas" options={[{ value: "alkmaar", label: "Alkmaar" }, { value: "bergen", label: "Bergen" }, { value: "castricum", label: "Castricum" }]} defaultValue={["alkmaar"]} />Props
TransferList
| Prop | Type | Default | Description |
|---|---|---|---|
optionsrequired | TransferListOption[] | ||
value | string[] | ||
defaultValue | string[] | [] | |
onValueChange | (value: string[]) => void | ||
label | ReactNode | "Assign options" | |
availableLabel | string | "Available" | |
selectedLabel | string | "Selected" | |
addLabel | string | "Add selected" | |
removeLabel | string | "Remove selected" | |
emptyLabel | string | "No options" |
Also accepts Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue">.
Keyboard
| Keys | Does |
|---|---|
| Tab, Space | Moves through and marks native checkbox options. |
| Enter, Space on a move action | Adds or removes the marked options; marked state clears after the move. |
Accessibility
- A top-level fieldset names the task; available and selected lists have distinct legends and counts.
- Every option and move action has a 44px target. Disabled options stay fixed; unavailable moves are disabled.
- The selected count is a polite status. Hidden fields submit each selected value under name.
- The ref reaches the fieldset. Form reset restores uncontrolled values and clears marked options.
Markup
<fieldset class="rs-transfer-list"><legend class="rs-transfer-list-legend">Assign cities</legend><div class="rs-transfer-list-columns"><fieldset class="rs-transfer-list-panel"><legend class="rs-transfer-list-heading">Available</legend><label class="rs-transfer-list-item"><input type="checkbox" /> Alkmaar</label></fieldset><div class="rs-transfer-list-actions"><button class="rs-btn-ghost" type="button">Add selected</button><button class="rs-btn-ghost" type="button">Remove selected</button></div><fieldset class="rs-transfer-list-panel"><legend class="rs-transfer-list-heading">Selected</legend><p class="rs-transfer-list-empty">No options</p></fieldset></div></fieldset>
Classes
.rs-transfer-list.rs-transfer-list-legend.rs-transfer-list-columns.rs-transfer-list-panel.rs-transfer-list-heading.rs-transfer-list-options.rs-transfer-list-item.rs-transfer-list-actions.rs-transfer-list-action.rs-transfer-list-empty.rs-transfer-list-status