# Search Bar Group

## Overview

This is a fully responsive block that includes a search bar with an input and a reusable called [filters\_template](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/reusables/applyfilters) for applying filters. No workflows are associated with this block. 

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXpm1YHNYpL_6wGOw42%2F-MXpo5IsdkygQqNyWpAR%2FScreen%20Shot%202021-04-09%20at%201.47.02%20AM.png?alt=media\&token=83b8dd13-4c8e-469c-a09c-530968b343c0)

## 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

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LgUGGax46RdOqvGSM67%2F-LgUN7zOmOLcnlDdHjAH%2FScreen%20Shot%202019-06-03%20at%203.05.10%20PM.png?alt=media\&token=e9582177-ebaa-4e14-8796-845c6cdc50b5)

* 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

![Repeating group constraint references Input Search for something's value](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MRfbIDPPa3js1IikHv6%2F-MRfeNrYB1yO6L_kxJdY%2FScreen%20Shot%202021-01-22%20at%2011.54.10%20AM.png?alt=media\&token=f3dde44f-a06f-4283-b494-98a77343917c)