# Top Search Bar Component

The Top Search Bar is the key component of the Global Search Page, providing a seamless and efficient way to search. Located at the top of the page for easy access, this search bar allows you to input keywords and instantly receive relevant results from all available communities and users. Its advanced filtering capabilities ensure that your search is precise and tailored to your needs. Whether you are looking to join new communities or connect with specific users, the Top Search Bar is your go-to tool for an enhanced and streamlined search experience.

<div><figure><img src="/files/a746koPubfsO618KXFj0" alt=""><figcaption></figcaption></figure> <figure><img src="/files/UgQzv6yYg4LNS6P4qFYP" alt=""><figcaption></figcaption></figure></div>

### Features <a href="#features" id="features"></a>

| Feature | Description                                 |
| ------- | ------------------------------------------- |
| Search  | Type keyword to search and cancel searching |

### Customization

<table><thead><tr><th width="315">Config ID</th><th width="122">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>social_global_search_page/top_search_bar/*</code></td><td>Component</td><td>You can customize component <code>theme</code>.</td></tr><tr><td><code>social_global_search_page/top_search_bar/search_icon</code></td><td>Element</td><td>You can customize <code>icon</code>.</td></tr><tr><td><code>social_global_search_page/top_search_bar/clear_button</code></td><td>Element</td><td>You can customize <code>icon</code>.</td></tr><tr><td><code>social_global_search_page/top_search_bar/cancel_button</code></td><td>Element</td><td>You can customize <code>text</code>.</td></tr></tbody></table>

For more details on customization, please refer to the [Customization](/social-plus-uikit/uikit-4/customization.md) page.

### Usage <a href="#usage" id="usage"></a>

{% tabs %}
{% tab title="iOS" %}
{% embed url="<https://gist.github.com/amythee/481422e6df8224f8060ba4a9927d043d>" %}
{% endtab %}

{% tab title="Android" %}
{% embed url="<https://gist.github.com/9790958b617ea4812cc9493738092509>" %}
{% endtab %}

{% tab title="Web" %}
{% embed url="<https://gist.github.com/amythee/e94cd959249c00c4023fa420837eee24>" %}
{% endtab %}

{% tab title="React Native" %}
{% embed url="<https://gist.github.com/amythee/fbefda9418ab9395bd394dfae2d14007>" %}
{% endtab %}

{% tab title="Flutter" %}
{% embed url="<https://gist.github.com/amythee/048fe9ddba9d4d7d663d5edc42ea795e>" %}
{% endtab %}
{% endtabs %}


---

# 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.social.plus/social-plus-uikit/uikit-4/social/discover-and-search/global-search-page/top-search-bar-component.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.