Recipients Multi-Select Dropdown POC

Approved Design

Solving the "All Suppliers" selection ambiguity with a Contextual Action Bar & Two-Step Gmail-style selection.

← Back to Registry Index
Before Original Ambiguity (User Screenshot)
  • Plain-text "All Suppliers" row was mixed right into the checkbox list.
  • Typing "D" made it unclear if clicking "All Suppliers" selects all 48 suppliers or only the visible "D" suppliers.
  • No closed-trigger indicator of whether all suppliers vs a subset were selected.
After Implemented Solution
  • Dedicated Action Bar between search box and list with tri-state master toggle.
  • Two-Step Gmail Banner: Selecting visible "D" results immediately prompts "All 6 matching suppliers selected. Select all 30 suppliers?".
  • Crystal Clear Closed Trigger: Highlights "All Suppliers (30)" or individual tags with +N count badge.

Live Interactive Component

Try searching D in dropdown!
Search by supplier name, company code (e.g. DEL-101), or business category.
Quick Test Presets

Example Context: Procurement RFQ Dispatch Form

Procurement Module
Target: 0 suppliers

Component Configuration

Component Size
Closed Trigger Mode
Max Visible Tags

Reactive State Monitor

0 / 30 Selected
bound selectedIds: 
[]
Active Recipients (0):

None selected (empty array)

How to verify the 2-step Gmail flow:

  1. Open the "Recipients *" dropdown.
  2. Type "D" in the search box (filters to 6 suppliers).
  3. Click the Action Bar: "Select all (6)".
  4. Observe the inline alert: "All 6 matching suppliers selected. Select all 30 suppliers?"
  5. Click the blue link to select all 30 suppliers globally!
  6. Notice the closed trigger clearly displays "All Suppliers (30)".