Patterns/Contextual Menu

Multi ComboBox allows users to enter multiple values which are displayed as tokens. It provides an editable input field for filtering the list, and a dropdown menu with a list of the available options. Users can also enter custom values if the entries are not validated by the application. Multi-selection is permitted.

**Use the multi-combo box if:** - The user needs to select one or more options from a long list of options. - The values of the option list contain secondary information that does not need to be displayed right away. **Do not use multi-combo box if** - The user needs to choose between two options, such as ON or OFF and YES or NO. - You need to display more than one attribute. - You want to enable users to add custom values. - Your use case requires all available options to be displayed right away, without any user interaction - The user needs to search on multiple attributes. - Your use case requires more options to choose from. **Use the multi-combo box if:** - The user needs to select one or more options from a long list of options. - The values of the option list contain secondary information that does not need to be displayed right away.

Note that the popover body width is restricted to a max of 37.5rem to avoid readability issues in large-width popovers. Applications are free to override this in their custom styles if needed and own any readability issues arising from this override.

In cases where the list items need to be categorized into groups, it is possible to add headers for each category as seen below.

The default length size of the popover body is often different from the text length. The body length can be adjusted to match the text length by adding the \

To make the \

For a complete list of states supported by the \

For mobile devices, or tablets, Multi ComboBox component should be displayed in fullscreen mode. So instead of using popover and dropdown, it should be wrapped in \

The user can filter selectable options by typing in the input. A button with the text "Show All" should be displayed, that when clicked, will clear the text in the input and show all options in the list.

The user can filter selectable having 2 options by typing in the input. A button with the text "Show All" should be displayed, that when clicked, will clear the text in the input and show all options in the list.