# 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="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FGuXcrtEGTtGb9T2x7uBK%2FChatGPT%20Image%20Feb%203%2C%202026%2C%2008_17_32%20AM.png?alt=media&#x26;token=9074f86e-bea1-4f18-a427-f5bee4944286" alt=""><figcaption></figcaption></figure>