Combobox

[davicostalf]

High-level objective

Deliver a form field that allows merchants to choose one or more options out of many. To provide a good usability, its essential to consider that the field must provide a search interaction and loading feedback. Besides these concerns, since the market definition of a "Combobox" is quite broad, it's up to us to define the requirements that make sense.

Rationale for prioritization

Form pages are the most common in the admin, and this field type is present in critical flows of the admin. It has already been iterated by teams using Admin UI, both design-wise and engineering-wise. According to engineers, this pattern is tricky to implement and will take multiple cycles to reach maturity, so we decided to start investing effort into it.

Scope and timeline

2022 - Design, Exploration

Owner: @davicostalf

• Discuss with engineers to collect ideas and concerns
• Benchmark how other design systems handle this interaction
• Design multiple versions considering ideas from internal and external examples
• List possible requirements and validate with other designers and core-team engineers

---

Q1C1 - Design, Specification

Owner, Support: @davicostalf, @anitavincent

• Write and illustrate specifications for engineers to implement
• Build reusable resources in Figma for other designers to use
• Write documentation for other designers on how to apply the component
• Validate specs and docs with other designers and core-team engineers
• Communicate the release to designers

---

Q1C2 - Engineering, Refinement

Owner, Support: TBD

• Benchmark how other design systems implement the component
• Write RFC detailing the proposed component architecture
• Break down changes into a timeline with one-cycle deliveries
• Validate RFC and timeline with other engineers and core-team designers

---

Q2C1 - Engineering, Implement: Combobox Single

Owner, Support: TBD

• Implement the first part of the proposed timeline according to design specifications
• Document code with references and examples
• Validate implementation with core-team engineers and designers
• Communicate the release to engineers

---

Q2C2 - Engineering, Implement: Combobox Multiple

Owner, Support: TBD

• Implement the second part of the proposed timeline according to design specifications
• Document code with references and examples
• Validate implementation with core-team engineers and designers
• Communicate the release to engineers

[davicostalf]

Additional states that need to be designed (and implemented):

Error state for combobox value tag, with the option to remove always visible (even on field default state)
Popover with only the option to create new value
Button to create new value that includes the typed value in its label
"Type to search" popover when the user has focused on the field but still hasn't typed anything