E3.05.3select current value always visibledesign

The current value of a select must stay visible

Aliases: closed-state value · trigger label · selected value display

What it is

Whether a select is closed or open, the selected value must remain a stable object on the trigger. Closed, it is the field’s entire readable content. Open, it must still be recognisable — highlighted in the list, while the trigger text is not replaced by “please choose” or a search field. If the current value vanishes, the field becomes a button whose contents are unknown; checking, screenshots, and assistive “selected” announcements all break.

Always visible names the value, not whether the list is open. The list may scroll the selected row away; the trigger or a pinned summary must still speak that value.

Why it happens

People scan a closed select as a read-only label; they do not open it to confirm during a form sweep. If the trigger shows a placeholder, blank, or an icon that has crowded out the words, the sweep treats it as unfilled even when it was chosen last week. While open, attention moves into the list; the trigger value is the anchor back to “what I already picked.” The in-list highlight can scroll out of view; the anchor must not scroll with it.

Filtering and typeahead rewrite trigger contents. If typing a keyword replaces the current value, cancelling the filter looks like losing the value — it is still in the model, the UI just borrowed the anchor. Placeholder “please choose” and a real value must be mutually exclusive: a value displaces the placeholder; only emptiness may show it.

Where it stops holding

A multi-select’s current value is a summary, not one word; that visibility rule belongs to another control, and a single select cannot discharge it with “3 selected.” In a cascade, a parent change may invalidate the child; invalid must show empty or an error, not keep displaying a stale value — always visible is not always showing expired. Long labels truncated in a narrow trigger must still expose a unique part (country code, id) or the trigger must wrap; an ellipsis alone is not a value. Marking selection with a tick only while the list is open, then blanking the trigger, makes visibility a transient.

Applying it

  • In the closed trigger, show only the current value or a clear empty placeholder, never both stacked.
  • Keep the trigger value while the list is open; put filter typing in its own search field rather than conscripting the trigger.
  • When the selected row scrolls away, do not replace the trigger with a preview of the highlighted row unless that row is the new selection.
  • How to check: pick a value, close, scroll the page away and back; then open and scroll the list far. If both moments yield the selection without thought, it stayed visible.

Related

  • Within the group: E3.05.1 A closed select hides every alternative until it is opened · E3.05.2 Below a count threshold, laying options out is better
  • Adjacent: E3.06 Multi-Select Dropdowns · E3.13 Cascading Selects
  • Search terms: selected value visible · closed select display · trigger label

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E3.05.3