Two comboboxes ship, and they have nothing in common but a search box. The
column filter is a multi-select checklist that opens from a table heading; the
address autocomplete is a single-value typeahead backed by a remote geocoder. For picking one
value from a short fixed list the product uses a plain select instead.
Column filter
The trigger is the column heading itself, with a small caret. Sortable columns
sit beside it carrying a double arrow instead — same 11px uppercase type, different affordance. Both
heading and caret turn #A614C3 while any value is selected, so an applied filter reads without
opening the panel.
The second combobox is a true single-value typeahead, used for the street field
on a client record. Typing queries a remote geocoder and picking a suggestion fills street, city, state, ZIP
and country in one go — so the control writes five fields, not one.
1200 Innovation Drive
San Francisco, California, 94105
1200 Innovation Way
Palo Alto, California, 94301
1200 Innovation Parkway
Austin, Texas, 78758
1200 Innovation Boulevard
Sacramento, California, 95814
Part
Value
Trigger
The field itself — padding-right 36px to clear the icon
Icon
14×14 search · #9CA3AF · right 12px · pointer-events:none, decorative only
Panel
top calc(100% + 4px) · left 0 / right 0 · max-height 320px · radius 8px · 1px #E5E7EB · shadow 0 8px 24px rgba(0,0,0,.08) · padding 4px 0
Suggestion
padding 10px 16px · gap 12px · align-items: flex-start
Pin
14×14 map-pin at stroke-width 1.75 · #9CA3AF · margin-top 2px
Primary line
12px / 600 · #1F2937 · truncated
Secondary line
10px · #9CA3AF · margin-top 2px · truncated · city, state, ZIP
Active row
#F9FAFB — one highlight shared by hover and the keyboard
Query
Fires after 300ms idle, minimum 2 characters, at most 6 results, US/CA/MX
Loading
A … at right 32px, 11px #9CA3AF, while a request is in flight
Keys
↓/↑ move · Enter commits · Esc closes
Hovering a row moves the keyboard cursor rather than painting a separate hover state, so the two never disagree about which row Enter would pick.
The panel renders only when there is at least one result. There is no “no matches” state and no spinner inside the list — the … in the field is the only loading signal.
This is the only control in the product that reaches a third-party service while you type.
Specs
Part
Value
Trigger
11px / 700 uppercase · letter-spacing .05em · gap 4px · #6B7280, #A614C3 when filtered
Caret
7×5 solid triangle, not a chevron · margin-left 4px · takes the trigger’s colour
Panel
min-width 220px · radius 12px · overflow:hidden · #fff on 1px #E9EAEC · shadow-lg · margin-top 4px, left 0
Search block
padding 8px · border-bottom 1px; field padding 6px 10px · radius 8px · #F9FAFB on 1px #E9EAEC · gap 8px · 14px icon
Search input
12px · transparent · outline:none · flex:1
Select All
padding 8px 12px · border-bottom 1px · 12px · ticks only when every option is selected
A transparent fixed inset-0 backdrop at z-index 20; the panel sits at 30
The checkbox here is not the one on Checkbox: it is smaller, has a 1.5px border, and shows a bare tick instead of filling with the brand colour. It exists only inside this panel.
Selecting nothing and selecting everything mean the same thing — an empty set is treated as “no filter”, which is why Reset Filter clears the set rather than ticking all of it.
The search box filters the option list only — it never creates a value, so this is a filter, not a tag input. The address autocomplete below is the opposite: its field is the value.
There is no keyboard navigation, no highlighted option and no empty state — a search that matches nothing simply renders an empty list between the two dividers.
