Transfer List — cinder playground

Overview

TransferList renders one compact multiselect listbox for assigning items from a fixed pool to a selected set. The count and selected state stay visible in the same surface.

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 choose permissions, tags, or visible columns from a fixed pool.

Avoid when

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

Examples

Permission assignment

Choose permissions from one compact list with visible selection state.

Props

Props for transfer-list
Name	Type	Default	Description
`items` required	`TransferListItem[]`		Full item pool. Item IDs must be unique; duplicate IDs after the first are ignored. The component never mutates this array.
`value` bindable	`string[]`	`[]`	Unique IDs currently selected in the list. Supports `bind:value`. Unknown IDs are ignored and dropped on the next update.
`leftLabel`	`text`	`'Available'`	Accessible and visible label for the compact selection list.
`rightLabel`	`text`	`'Selected'`	Label used in the selection count and transfer announcements.
`onValueChange`	`(value: string[]) => void`		Called with the next selected value after an option is toggled.