UI Components Navigation & Search Search to Select

Updated: June 16, 2023

Search to Select

FUISearchToSelectView, FUISearchToSelectViewController

Intro

Search to select is a control used to search and select multiple items from a large collection of values. 

Search to select on compact (left) and on regular (right)
Search to select on compact (left) and on regular (right)

Usage

Do

Use the search to select control to choose one or more items from a set.

Positive example for search to select
Positive example for search to select
Don't

Don’t use the local search component to find and select multiple values.

Negative example for search to select
Negative example for search to select

Anatomy

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.

Search to select anatomy
Search to select anatomy

Behavior and Interaction

The search to select control may behave as a modal or a push depended upon the use case.

Example: push navigation (left), search to select (right)
Example: push navigation (left), search to select (right)

Select Objects

There are two ways that a user can select a value:

Option 1: The user can select several objects from the suggestion list.

Search to Select default state (left), selecting objects from the suggestion list (right)
Search to Select default state (left), selecting objects from the suggestion list (right)

Option 2: The user can search and select an object from the results list, which then populates within the search field and automatically navigates the user back to the default screen.

Note: The selected state (right screen) is visible for >1s before navigating to the default state.

Searching for an object (left), selecting an object from the result list (middle), automatically navigate back to default screen (right)
Searching for an object (left), selecting an object from the result list (middle), automatically navigate back to default screen (right)

Remove Object

There are two ways to remove a selected value:

  1. Delete it from the search input field at the top.
  2. Deselect it from the list below.
Remove object
Remove object

Resources

Development: FUISearchtoSelectView, FUISearchtoSelectViewController

Related Components/Patterns: Search Bar, Search (Pattern)