Skip FOLIO Project Navigation

💡 UX exploration: Pattern - Look-up


#1

Hello Everyone,

I just documented the pattern for the look-up feature and I would love to have your feedback.

The look-up feature allows users to easily search and pick content from a pre-configured list.

Structure

Look-up icon:

A look-up icon shall be placed on the right side of a text field allowing users to pick data from a pre-configured list.

If the text field allows free text entry in addition to the look-up feature, a vertical line shall separate the field from the icon.

Look-up modal:

The look-up modal is composed of a header with a left close icon and a centred title.
The content is divided into two parts. On the left side, there is the search & filter and on the right side, there is the result list with checkboxes.
A “Cancel” button in the default style and a “Save & close” button in the primary style are placed at the lower right.

Behavior

When users click on the look-up icon, the modal appears.
Users can refine the result list by using filters or keywords.
Selected results have a checkmark so users know which result they picked.
Once the selection is done, users need to click on the “Save & close” button to add the selection.