> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/native-screen/search-element.md).

# 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>