# Search Element

{% tabs %}
{% tab title="Content Tab" %}

### 🔧 Configure Search

Add a search bar to your screen and define how it behaves when users enter text.

#### Search Fields:

* **Hint Text** – Placeholder text displayed inside the search field (e.g., *Search…*).
* **Action URL** – URL where users are redirected after searching.
  * Use `{{search}}` to dynamically pass the entered search text.

**Example:**

```
https://yourdomain.com/search?q={{search}}
```

> ⚠️ Note: The `{{search}}` placeholder is mandatory to capture user input dynamically.
> {% endtab %}

{% tab title="Settings Tab" %}

### 🎨 Design

* **Border**: Enable/disable border
* **Corner Radius**: Square / Rounded / Fully rounded
* **Text Style & Color**: Font size and text color
* **Hint Text Color**
* **Background / Fill Color**
* **Border Color**
* **Search Icon**: Upload or select a custom icon (PNG/JPG/JPEG)

### Spacing

* **Margin**: Top, Bottom, Left, Right (px)

### 👁️ **Visibility**

* **Platform:** Android, iOS, or PWA
* **Device:** Mobile / Tablet
* **User Type:** Guest / Logged-in
  {% endtab %}
  {% endtabs %}

### ✅ **Use Case Examples**

* **Product Search**: Allow users to quickly find products by name or keyword.
* **Content Discovery**: Search blogs, articles, or announcements inside the app.
* **Help & Support**: Redirect users to FAQs or support pages based on search input.

## <mark style="color:green;">📱 How It Looks</mark>

Below are example of how the Countdown Timer appears in the app:

<figure><img src="/files/QyBF3mWQ7Kttam189ACt" alt=""><figcaption></figcaption></figure>


---

# 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://help.twinr.dev/native-screen/search-element.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.