🏷️

Action: Search & Filter

What does it do?

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

image
πŸ’‘

This action only filters content on the same page, it does not search app-wide.

⚠️

You must place it inside a top bar container.

The Tag

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

Which layer can I put it on?

A text box

How do I set it up in the design tool?

  1. Create a search bar design that includes a text box.
  2. image
  3. Make the text box as big as you want the input field to be.
  4. image
  5. Paste the tag into the layer name of the text box.
  6. image
  7. Place the search bar design in a top bar container. (Important❗️)
  8. image
  9. 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.

πŸ’Ύ Resources

πŸ‘‰ Sample Figma file

πŸ‘‰ Sample Adobe XD file