Replace selections with semantics

When width is limited, multi-select could break visual consistency.

Solution

A dropdown selector that collapses the selected item into a compact text. If the selected value was too long to display, it turns into a semantic sentence. This small interaction reduces cognitive load, maintain visual consistency.

Key assumption: Users don’t need to remember what they picked after they picked it.

Code

<span className="truncate">
  {selectedValues.length === 0 && "Select BI scopes"}
  {selectedValues.length === 1 && selectedValues[0].label}
  {selectedValues.length === 2 &&
    selectedValues.map(({ label }) => label).join(", ")}
  {selectedValues.length > 2 &&
    `${selectedValues.length} selected`}
</span>