# Search & filter

## 👉 **The Tag** <a href="#the-tag" id="the-tag"></a>

This tag turns a text box into a search field where users can filter items from a list by text content.

The component works for API data or manually created lists (as in the example file) with separate containers for each item. It only filters content **on the same page**, it does not search app-wide.

**📍 Where to add the tag:** A text layer in a top-bar container

```
[component:input-text][action:filter]
```

{% hint style="warning" %}
In case you use [**pagination**](/connect-api/pagination.md), the search won't happen over the items that haven't been loaded yet in the app screen. In this case, we recommend implementing a [backend search](/get-started/help-and-tutorials/browse-by-app-feature/backend-search-with-airtable.md), so the search happens over the whole database.&#x20;
{% endhint %}

![](/files/-Mhxbk0UcsEi3Scend9M)

## 🏷️ **How to add the tag** <a href="#how-to-add-the-tag" id="how-to-add-the-tag"></a>

&#x20;   1\. Create a search bar design that includes a text box.

![](/files/-MhxcRw6b-yraJMiwlCB)

&#x20;   2\. Make the text box as big as you want the input field to be.

![](/files/-MhxcWQ36LclwnA3p_WF)

&#x20;   3\. **Paste** the tag into the layer name of the **text box**.

![](/files/-Mhxc_REk_4e2Oelwl7Y)

{% hint style="danger" %}
The search bar design must be placed in a [top bar container](/bravo-tags/containers/container-top-bar.md).
{% endhint %}

![](/files/-Mhxci-RM2sFzBNU8vLj)

&#x20;   4\. Import to Bravo & preview on Bravo Vision 🚀

## 💾 Example files <a href="#example-files" id="example-files"></a>

Duplicate the files below to see how to set it up!

{% embed url="<https://www.figma.com/community/file/981937598316540400>" %}

{% file src="/files/-MhxdF8fFNKNF9vWOadb" %}
Search & filter.xd
{% endfile %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bravostudio.app/bravo-tags/mobile-actions/component-search-and-filter.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.