# Search Bar

Search Bar is an element group thats made up of an [Input](/app-builder/app-construction/elements/form-elements/input.md) and a [Button](/app-builder/app-construction/elements/web-elements/button.md).

<div align="left"><figure><img src="/files/4LEY09EJZozgLFd1CEvE" 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](/app-builder/popular-use-cases/create-a-filter.md).&#x20;

## Properties

<div align="left"><figure><img src="/files/9oVnRjsxp93zAJQTVr3J" 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](/app-builder/app-construction/elements/tooltip.md) 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](/app-builder/app-construction/data-store.md).

**Set Loading:** Set loading animation. See [Set loading animations](/app-builder/popular-use-cases/set-loading-animations.md).

{% hint style="info" %}
Visit [Interactions](/app-builder/app-construction/interactions.md) for more on events and actions.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.acho.io/app-builder/app-construction/elements/form-elements/search-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.