Transfer List

1import { TransferList } from '@/ui/Input'23<TransferList4  options={permissions}5  value={assigned}6  onChange={setAssigned}7  searchable8  labels={{ available: 'Available', selected: 'Assigned' }}9/>1011// Ticking queues; the chevron moves. Conflating them removes batching,12// which is the only reason this beats a checkbox list.13const [ticked, setTicked] = React.useState<string[]>([])1415function assign() {16  onChange([...value, ...ticked])17  setTicked([])                     // ticks mean "queued" — clear them18}1920// The keyboard equivalent of a double-click. Without it, every single item21// costs a trip to a 32px button.22function onItemKeyDown(e: React.KeyboardEvent, id: string) {23  if (e.key === 'Enter') {24    e.preventDefault()25    transfer([id])26  }27  if (e.key === ' ') {28    e.preventDefault()29    toggleTick(id)30  }31}3233// "Move all" respects the filter, which is what makes "assign every read34// permission" a two-step operation instead of thirty clicks.35function assignAllVisible() {36  const visible = available.filter((i) => matches(i, query))37  onChange([...value, ...visible])38}3940// Below 768px this control does not fit. Swap it, do not squeeze it.41const narrow = useMediaQuery('(max-width: 768px)')42if (narrow) return <CheckboxList options={options} value={value} onChange={onChange} />

<div class="ds-transfer">
  <div class="ds-transfer__pane">
    <div class="ds-transfer__head">
      <input type="checkbox" aria-label="Select all in Available" />
      <span>Available</span>
      <span>31</span>
    </div>

    <ul role="listbox" aria-multiselectable="true" aria-label="Available">
      <!-- selected = ticked, NOT assigned. The pane carries the assignment. -->
      <li role="option" aria-selected="true"  tabindex="0">deployments.write</li>
      <li role="option" aria-selected="false" tabindex="-1">billing.read</li>
    </ul>
  </div>

  <!-- Direction is meaningless on its own: name the pane and the count. -->
  <div class="ds-transfer__controls">
    <button type="button" aria-label="Assign 3 selected">›</button>
    <button type="button" aria-label="Assign all">»</button>
    <button type="button" aria-label="Remove all">«</button>
    <button type="button" aria-label="Remove 0 selected" aria-disabled="true">‹</button>
  </div>

  <div class="ds-transfer__pane">…</div>
</div>

<p role="status" aria-live="polite">9 of 40 permissions assigned</p>

.ds-transfer {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.ds-transfer__pane {
  flex: 1 1 0;
  min-inline-size: 14rem;            /* equal: neither side matters more */
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--ds-surface);
  overflow: hidden;
}

/* Both panes share a height even when one is empty, so the move buttons
   never shift under the pointer heading for them. */
.ds-transfer__pane ul {
  flex: 1;
  block-size: 224px;
  overflow-y: auto;
  padding: 4px;
}

.ds-transfer__controls {
  display: flex;
  flex-direction: column;
  justify-content: center;           /* centred: direction stays unambiguous */
  gap: 6px;
  flex: 0 0 auto;
}

[role='option'] {
  display: flex;
  align-items: center;
  gap: 10px;
  block-size: 30px;
  padding-inline: 8px;
  border-radius: var(--radius-md);
  /* Identifiers align on their prefixes, which makes groups visible. */
  font-family: var(--font-mono);
  font-size: 12px;
}

[role='option'][aria-selected='true'] {
  background: var(--ds-accent-subtle);
  color: var(--ds-fg);
}

/* Two panes plus a move column leaves ~150px per list on a phone. Replace
   the control rather than compressing it. */
@media (max-width: 768px) {
  .ds-transfer { display: none; }
  .ds-transfer-fallback { display: block; }
}