DualListBox

DualListBox wraps TransferList with searchable panels and enterprise copy defaults. Use it for admin settings where the available and selected sides need stronger framing.

#Default usage

<DualListBox
  items={[
    { value: "design", label: "Design team", description: "Can update visual docs.", group: "Teams" },
    { value: "release", label: "Release team", description: "Can publish packages.", group: "Teams" },
    { value: "support", label: "Support inbox", description: "Can triage feedback.", group: "Queues" }
  ]}
  defaultSelectedValues={["design"]}
/>

#Import

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

#Accessibility

Accessibility behavior is inherited from TransferList: listbox panels, option selection, and button-based moves.

#API

DualListBox accepts the same core props as TransferList and keeps search enabled by default. It is a compositional wrapper, so use TransferList when you need a lighter control.

#Styling

DualListBox uses the TransferList styling contract and FroggDesign tokens for panels, list items, selection states, and move controls.