# Search Bar

Search Bar is an element group thats made up of an [input](https://docs.acho.io/app-builder/app-construction/elements/form-elements/input "mention") and a [button](https://docs.acho.io/app-builder/app-construction/elements/web-elements/button "mention").

<div align="left"><figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F5CY17DIG1BU8qrHhfBSo%2Fimage.png?alt=media&#x26;token=496e7ab7-be5e-471f-889e-c8a722661cd4" alt="" width="375"><figcaption></figcaption></figure></div>

The search bar makes it simple to use the user-inputted value in interactions. The input value is stored as a string in the Event Payload. For an example, see [create-a-filter](https://docs.acho.io/app-builder/popular-use-cases/create-a-filter "mention").&#x20;

## Properties

<div align="left"><figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FUWPqlVVQfmIgrDsj0n8s%2Fimage.png?alt=media&#x26;token=80912409-52b1-41ba-bfc6-3a7b16d27ac1" alt=""><figcaption></figcaption></figure></div>

**Click button to search:** Users can always initiate a search by pressing the Enter key. With this toggle activated, they will also have the option to initiate the search by clicking the search button. If this toggle is deactivated, the button will be both disabled and hidden.

See [tooltip](https://docs.acho.io/app-builder/app-construction/elements/tooltip "mention") for tooltip configurations.

## Supported Events

**Search:** Triggered when a user clicks the search button.

* The inputted value is stored as a string in the Event Payload. You’ll be able to access it using `${event.value}`

## Supported Actions

**Set Data:** Change element data. See [data-store](https://docs.acho.io/app-builder/app-construction/data-store "mention").

**Set Loading:** Set loading animation. See [set-loading-animations](https://docs.acho.io/app-builder/popular-use-cases/set-loading-animations "mention").

{% hint style="info" %}
Visit [interactions](https://docs.acho.io/app-builder/app-construction/interactions "mention") for more on events and actions.
{% endhint %}