In general terms, a "dropdown" is a combination of a trigger that opens a panel. A dropdown can mean many things while not being specific to any particular implementation. For that reason we've specified two distinct components and included variants where necessary. While the UI is nearly identical for each, there are important considerations related to a user's task and underlying semantics.
A disclosure widget is a type of dropdown that includes a button that opens a panel of links or actions. Think a user needs to do something or go somewhere when you consider a disclosure. A disclosure is more forgiving than a combobox semantically, since nearly any element can be a child of the expanded panel. It also includes an optional header to provide more context for the panel content.
A combobox is a type of dropdown that includes a panel of options typically opened by a button or text input. Think a user needs to select an option when you consider a combobox. A combobox is the more complex of the two and includes two different implementations,
GlFormCombobox. In addition to the listbox of options with particular semantics, a combobox includes the following optional features: header, section titles, and a fixed footer with related actions.
Which component should you use?
selecting one or more options?] --> |Action or workflow|B[Has GlDisclosure been implemented?
See gitlab-ui#1632]; A --> |Selecting one or more options|C[Does the user need to be able to
enter a custom item string?]; B --> |Yes|F[Use GlDisclosure]; B --> |No|G[Use GlDropdown for now]; C --> |Yes|D[Does GlFormCombobox support
the required features? See &8901]; C --> |No|E[Use GlCollapsibleListBox]; D --> |Yes|H[Use GlFormCombobox]; D --> |No|I[This probably can't be implemented
or migrated yet];
- A menu (
- The tooltip and popover components share similar interactions with a disclosure and combobox, however their primary use is to provide contextual information and by default don't drop down in the same fashion, making this category less intuitive.
- An accordion is a disclosure widget, but since the end goal is showing and hiding content with a different behavior, it is a separate component with a different purpose.
- A select (
<select>) has the closest relationship to the disclosure and combobox, however it's use is limited to the context of a form as much as possible.
Last updated at: