Transfer List — cinder playground

Overview

TransferList renders two listboxes and transfer controls for assigning items from an available pool to a selected set.

Usage

<script lang="ts">
  import { TransferList } from '@lostgradient/cinder/transfer-list';

  const items = [
    { id: 'read', label: 'Read' },
    { id: 'write', label: 'Write' },
  ];

  let value = $state(['read']);
</script>

<TransferList {items} bind:value leftLabel="Available permissions" rightLabel="Granted" />

Live preview

When to use

Use when

Letting users build a subset from a fixed pool such as permissions, tags, or visible columns.

Avoid when

The pool needs inline search or filtering - compose search controls around the lists instead.
The user only needs independent checkbox choices - use checkbox-group instead. Use Checkbox group instead

Examples

Permission assignment

Move selected or all permissions between available and granted lists.

Props

Props for transfer-list
Name	Type	Default	Required	Bindable	Description
`items`	`TransferListItem[]`		req		Full item pool. Item IDs must be unique; duplicate IDs after the first are ignored. The component never mutates this array.
`value`	`string[]`	`[]`		bind	Unique IDs currently assigned to the right-side selected list. Supports `bind:value`. Unknown IDs are ignored and dropped on the next transfer.
`leftLabel`	`text`	`'Available'`			Accessible and visible label for the left list.
`rightLabel`	`text`	`'Selected'`			Accessible and visible label for the right list.
`onchange`	`(value: string[]) => void`				Called with the next right-side value after a transfer.