Search to select is a control used to search and select multiple items from a large collection of values.
A. Search Field
The search field is located below the navigation bar.
B. Suggestion List
The suggestion list sits below the search field and may display recommended items that are immediately available for selection. If there are no suggestions available, the full list of objects can be displayed, sorted alphabetically.
C. Select All Button
The select all button is an optional action that selects all values in the list.
The search to select control may behave as a modal or a push depended upon the use case.
There are two ways that a user can select a value:
Option 1: The user can select several objects from the suggestion list.
Option 2: The user can search and select an object from the results list, which will then populate within the search field and automatically navigate the user back to the default screen.
Note: Selected state (right screen) is visible for >1s before navigating to the default state.
There are two ways to remove a selected value:
- Delete it from the search input field at the top.
- Deselect it from the list below.