Patterns/Multi Input

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

**Use the multi input if:** - You want the user to select multiple ranges. - The dataset to choose from is expected to increase over time. - You need to provide the value help option to help users select or search multiple business objects. - You want to enable users to add custom values. **Use the multi input if:** - You want the user to select multiple ranges. - The dataset to choose from is expected to increase over time. - You need to provide the value help option to help users select or search multiple business objects. - You want to enable users to add custom values.

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 disable a \

For a complete list of states supported by the \

For mobile devices, or tablets, multi input 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.