What does it do?
Turns a text box into a search field where users can filter items from a list by text content.
This action only filters content on the same page, it does not search app-wide.
You must place it inside a top bar container.
Which layer can I put it on?
A text box
How do I set it up in the design tool?
- Create a search bar design that includes a text box.
- Make the text box as big as you want the input field to be.
- Paste the tag into the layer name of the text box.
- Place the search bar design in a top bar container. (Important❗️)
- Import to Bravo & preview on Bravo Vision 🚀
This action works for API data or manually created lists (as in the example file) with separate containers for each item.
👉 Sample Figma file
Figma - Bravo Sample: Search & filter | Made for Bravo Studio. Add a search bar in your Bravo app with this sample Figma file. The file ...
Figma Community file - Made for Bravo Studio. Add a search bar in your Bravo app with this sample Figma file. The file includes layers named with Bravo Tags, containers, and other essential setup. To see the final result, create a project in Bravo Studio with this Figma file and preview with Bravo Vision.
👉 Sample Adobe XD file