A search card in your bolt app is a quick way for users to find specific information. It has an input field where users enter keywords, and the app shows suggestions as they type. After searching, users get a list of relevant results like articles or videos. This helps users discover content efficiently and navigate the app's extensive news database.
 

Defining the location of your search

When incorporating search into your app, several considerations come into play. There are diverse ways to implement search within your app:

1. As a dedicated tab at the bottom of the app.
2. Within the settings or account section.
3. Using an icon located at the top right of the app's toolbar

In this Kit we will be going with the first option.

Defining the search page

You need to account for users who haven't search anything on this page yet. To prevent the page from appearing empty, you should offer them an empty state.
The empty state should consist of the following elements:

• An illustration portraying the empty state.
• A title such as “Search.”
• A description encouraging users to search articles and multimedia they wish to see.

Here is an example of what that might look like:

To begin, users can start typing in the search bar, and the system will provide automatic suggestions for related terms. After the results appear, users can select either "Most Relevant" or "Most Recent" for sorting. While alphabetical sorting isn't available by default, you have the option to decide which image type to display alongside your search results. The available image options are:

• Main article image
• Article snapshot
• No image