# Search Bar Group

This is a fully responsive block that includes a search bar with an input and a reusable called filters\_template for applying filters. No workflows are associated with this block. 

## Structure

* When this module is added to a page, it is placed within a group called **Blocks container 860 (do not rename)** on the page. This group contains the responsive settings for all blocks.
* This block **Group Main search filter** contains two main groups:
  * **Group Inner search bar** \
    This group contains an input, clear input button, and filter options.
  * **Group PLACEHOLDER search** \
    This is a placeholder group. To add more content to the search bar, resize this group to make space. Please ensure that no elements are overlapping otherwise it would lead to responsiveness issues.

## How to set up

* Add the following workflow to the page (this removes the filter's circular background hover effect):
  * When page is loaded, set state of **filters\_\[object name]'s** Remove background hover? to yes
* Modify the filter options in the reusable element for **filters\_template**. [Click here](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/reusables/applyfilters) for more information.
* Add a search constraint to your repeating group on the page