TransferList

Two filtered panes with move buttons. Check items on the left and add them to the chosen pane; remove moves them back. One hidden input per chosen value carries the form name for native submit.

Example

Tools

Pick the tools this project uses.

Available

GitFigmaDocker

Chosen

<TransferList
  id="tools"
  label="Tools"
  name="tools"
  available={[{ value: "git", label: "Git" }, { value: "figma", label: "Figma" }, { value: "docker", label: "Docker" }]}
  chosen={[]}
  hint="Pick the tools this project uses."
/>

Preselected

Editors

Candidates

VimEmacs

Picked

VS Code

<TransferList
  id="editors"
  label="Editors"
  name="editors"
  available={[{ value: "vim", label: "Vim" }, { value: "emacs", label: "Emacs" }]}
  chosen={[{ value: "vscode", label: "VS Code" }]}
  titles={["Candidates", "Picked"]}
/>

Props

Prop	Type	Default	Description
`id`	`string`	-	Required. Group label id prefix.
`label`	`string`	-	Visible group title; names the move-action group.
`name`	`string`	`id`	Hidden-input form name; one input per chosen value.
`available`	`Array<string \| { value; label; disabled? }>`	`[]`	Items in the left pane.
`chosen`	`Array<string \| { value; label; disabled? }>`	`[]`	Items in the right pane; also the initial hidden inputs.
`titles`	`[string, string]`	`["Available", "Chosen"]`	Pane legends; filters are named `"Filter {title}"`.
`hint`	`string`	-	Help text below the title, linked via `aria-describedby`.
`class`	`string`	-	Style passthrough.

Behavior

Add and Remove move checked items; Add all and Remove all move only the visible (filter-respecting) items, so a filter narrows bulk moves.
Move buttons stay disabled until their source pane has checked items (Add all / Remove all disable when their pane is empty); the script re-syncs on every change.
There is no error prop: with two panes and four move actions there is no single control to invalidate, so invalid-state messaging belongs to the surrounding form, not this component.

Accessibility

Group wrapper carries role="group" named by the title; each pane is a fieldset with its title as legend.
Each pane has a search box named "Filter {title}"; filtering hides non-matching items with hidden.
Item checkboxes carry the option value and are named by their label; pane checkboxes carry no name, submit flows through the synced hidden inputs.
Move buttons are named "Add selected", "Add all", "Remove selected", "Remove all".
Moving items dispatches ink:transfer:change with { chosen }.