TransferList

TransferList is for assigning users, permissions, tags, and resources without turning the flow into a dense table.

#Default usage

<TransferList
  searchable
  items={[
    { value: "reviewer", label: "Reviewer", description: "Can approve release changes." },
    { value: "publisher", label: "Publisher", description: "Can publish npm packages." },
    { value: "observer", label: "Observer", description: "Read-only release visibility." }
  ]}
/>

#Import

import { TransferList } from "@froggdesign/enter-ui-react";

#Accessibility

Panels use listbox and option semantics. Move controls are native buttons and remain keyboard reachable.

#API

• items supports labels, descriptions, groups, and disabled state.
• selectedValues, defaultSelectedValues, and onSelectedValuesChange.
• searchable adds panel filters.
• disabled locks all controls.

#Styling

TransferList uses .eui-transfer-list classes and FroggDesign tokens for panel surfaces, option rows, search inputs, and transfer controls.