<ComboBox>

<ComboBox> is a dual-list selector — sometimes called a "shuttle" or "transfer list". The left column lists available options, the right column lists selected options, and arrow buttons move items between the two.

This is not the same pattern as a typeahead/autocomplete. For that, use <Select>, <ModelSelect>, or <MultiSelect>.

Basic Usage

<ComboBox
  @options={{this.allPermissions}}
  @selected={{this.assignedPermissions}}
  @optionLabel="name"
  @optionBoxLabel="Available"
  @selectionBoxLabel="Assigned"
  @onChange={{fn (mut this.assignedPermissions)}}
/>

How It Works

1. The user clicks options in the left column to select them (highlighted as "pending")
2. Clicks the right-arrow button to move them to the selected list
3. Or clicks options in the right column ("unpending") and the left-arrow button to remove them

Arguments

When to Use

• Permission / role assignment UIs (assign abilities to a role)
• Multi-pick configuration where seeing both "available" and "assigned" simultaneously is helpful
• Bulk-assign workflows (assign drivers to a zone, products to a catalog, etc.)

For most multi-select use cases prefer <MultiSelect> — it's more compact.

Source