[Controls] Options List Selection Management

[ThomThomson]

Options List Control Selection Management

Users may need faster ways to manage or see their selections. Because the typeahead feature allows users to change what appears in the dropdown, and the full text of the entry can potentially be cut off due to the configured control sizing, situations could arise where a user no longer knows what they have selected.

There are three potential changes that we can make to the Options List Control Popover which will help users with this problem:

Show all vs. Show selected

A switch on the top right corner of the popover could allow the users to see only the checked items. Unchecking an item here would remove it from the list. When 0 selections are made, the switch would be greyed out and would automatically switch back to showing the available options.

Here is an example from App Search

Provide a clear all selections button

A button that quickly clears all selections could be implemented which would allow the user to remove all selections without clicking on each one. This could potentially be implemented in two ways:

Hover mode on selection count The selection count could be made interactive: Hovering would transform the badge into warning color, and place an X icon - interacting would clear all selections. This is more implicit, but could be natural to users. It could potentially also suffer from being too easily pressed.

Alternatively, a more explicit Clear selections button could be included in the top part of the Options list popover. This may be a better all around solution - but with less pizzaz.

Sort selections towards the top

If items that are selected were always sorted towards the top, users would have an easier time finding their selections.

• We would need to consider how many selected items to show. If all selected items are shown when no search string is entered it could potentially force the user to scroll to see available (unselected) items when they are trying to select more, if many items are already selected.

• When the user types a search string they might expect only matching selected items to be included in the dropdown.

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)