Search & filter

The text box will turn into a search field where users can filter items from a list on the same page by text content.

👉 The Tag

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]

In case you use pagination, 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, so the search happens over the whole database.

🏷️ How to add the tag

1. Create a search bar design that includes a text box.

2. Make the text box as big as you want the input field to be.

3. Paste the tag into the layer name of the text box.

The search bar design must be placed in a top bar container.

4. Import to Bravo & preview on Bravo Vision 🚀

💾 Example files

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

https://www.figma.com/community/file/981937598316540400www.figma.com

PreviousScan codes (remote action)NextRefresh page

Last updated 2 years ago

Was this helpful?

hashtag👉 The Tag

hashtag🏷️ How to add the tag

hashtag💾 Example files

👉 The Tag

🏷️ How to add the tag

💾 Example files