Search & sort recipe

The search and sort pattern allows users to quickly search, sort and browse sets of records.

Structure

Search and sort is a pattern that produces a 3 pane layout with a search & filter pane, a result pane, and a record pane.

 

Generally, the following ingredients are used to build search and sort:

Behavior

Step 1: Users can start a query in the search & filter pane

Step 2: Users should see a list of results in the result pane.

Step 3: By clicking a list item, more info about the item should be displayed in the record pane.

Customized your search and sort component

For different layouts and more specific filtering needs,  recipes can be used for search & filter, result and record panes.

To create a customized search and sort pattern, simply use the ingredients (listed previously) in a way that better fit your app.

Custom search and sort layout using the search field and the search button only