# Configuration

***

### Show search

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`show`

**Path to the configuration**:\
Tab "Header" => Block "Search"

**Technical name**:\
`twt-header-search-show`

## Basic configuration

***

### Layout type

**Field type**:\
Select

**Available values**:\
• Input (default)\
• Flyout search\
• Fullscreen search\
• Global Search @Desktop (only available with "Header 1.1")

**Example value**:\
`Input (default)`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Basic configuration"

**Technical name**:\
`twt-header-search-type`

{% hint style="info" %}
**Input (default)**\
Available in "Header 1.1" and "Header 1.2".

**Flyout search / Fullscreen search**\
Available in all headers.

Must be selected for "Header 2.1" and "Full-width sticky header".

**Global Search**\
Available in "Header 1.1" in the desktop viewport. Use the color: "Layout" > "Background colour (Action buttons)".
{% endhint %}

***

### Corner type

**Field type**:\
Select

**Available values**:\
• not rounded (default)\
• round corners\
• individual radius

**Example value**:\
`not rounded (default)`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Basic configuration"

**Technical name**:\
`twt-header-search-input-corner-type`

{% hint style="info" %}
**rounded corners**\
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

**round corners**\
Uses a predefined radius for round corners.
{% endhint %}

***

### Border radius (individual radius)

**Field type**:\
Number field

**Example value**:\
`10`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Basic configuration"

**Technical name**:\
`twt-header-search-input-border-radius`

{% hint style="info" %}
**Note**: This configuration relates to the corner type "individual radius".
{% endhint %}

## Colour configuration

***

### Text colour (Input)

**Field type**:\
Color picker

**Example value**:\
`#333333`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Colour configuration"

**Technical name**:\
`twt-header-search-input-color`

***

### Border colour (Input)

**Field type**:\
Color picker

**Example value**:\
`#e4e7ea`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Colour configuration"

**Technical name**:\
`twt-header-search-input-border-color`

***

### Background colour (Input)

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Colour configuration"

**Technical name**:\
`twt-header-search-input-background-color`

***

### Icon colour (Button)

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Colour configuration"

**Technical name**:\
`twt-header-search-btn-icon-color`

***

### Border colour (Button)

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Colour configuration"

**Technical name**:\
`twt-header-search-btn-border-color`

***

### Background colour (Button)

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Colour configuration"

**Technical name**:\
`twt-header-search-btn-background-color`

## Typography

***

### Text alignment

**Field type**:\
Select

**Available values**:\
• align left\
• align center\
• align right

**Example value**:\
`align left`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Typography"

**Technical name**:\
`twt-header-search-text-align`

## Layout type 'Input'

***

### Maximum width

**Field type**:\
Text field

**Example value**:\
`500`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Layout type 'Input'"

**Technical name**:\
`twt-header-search-max-width`

{% hint style="info" %}
Enter the maximum width of the input in pixels (e.g. 500 or 500px).
{% endhint %}

***

### Maximum width @Desktop (≥1200px)

**Field type**:\
Text field

**Example value**:\
`100%`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Layout type 'Input'"

**Technical name**:\
`twt-header-search-width-desktop`

{% hint style="info" %}
Enter the maximum width of the input, from the desktop viewport (≥1200px), in pixels (e.g. 500 or 500px) or with 100%.
{% endhint %}

## Layout type 'Flyout search'

***

### Width

**Field type**:\
Select

**Available values**:\
• Container-max-width (Full-width-boxed)\
• 100% (Full-width)

**Example value**:\
`Container-max-width (Full-width-boxed)`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"

**Technical name**:\
`twt-header-search-flyout-container-width`

***

### Maximum width @Phone (landscape) (≥576px)

**Field type**:\
Text field

**Example value**:\
`500`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"

**Technical name**:\
`twt-header-search-flyout-max-width`

{% hint style="info" %}
Enter the maximum width of the input in pixels (e.g. 500 or 500px).
{% endhint %}

***

### Maximum width @Desktop (≥1200px)

**Field type**:\
Text field

**Example value**:\
`100%`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"

**Technical name**:\
`twt-header-search-flyout-max-width-desktop`

{% hint style="info" %}
Enter the maximum width of the input, from the desktop viewport (≥1200px), in pixels (e.g. 500 or 500px) or with 100%.
{% endhint %}

***

### Padding

**Field type**:\
Number field

**Example value**:\
`15`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"

**Technical name**:\
`twt-header-search-flyout-padding`

{% hint style="info" %}
Option "Flyout search" in "Search" > "Layout type" must be selected.
{% endhint %}

***

### Background colour @Phone (<576px)

**Field type**:\
Color picker

**Example value**:\
`#eef2f5`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"

**Technical name**:\
`twt-header-phone-search-flyout-background-color`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#eef2f5`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Layout type 'Flyout search'"

**Technical name**:\
`twt-header-search-flyout-background-color`

{% hint style="info" %}
Option "Flyout search" in "Search" > "Layout type" must be selected.
{% endhint %}

## Layout type 'Fullscreen search'

***

### Backdrop colour

**Field type**:\
Color picker

**Example value**:\
`rgba(0, 0, 0, 0.9)`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Layout type 'Fullscreen search'"

**Technical name**:\
`twt-header-search-fullscreen-backdrop-color`

{% hint style="info" %}
Select the desired background colour of the backdrop.

The option "Fullscreen search" must be selected as the "Layout type".
{% endhint %}

***

### Blur effect \[px] (Backdrop)

**Field type**:\
Number field

**Example value**:\
`0`

**Path to the configuration**:\
Tab "Header" => Block "Search" => Section "Layout type 'Fullscreen search'"

**Technical name**:\
`twt-header-search-fullscreen-backdrop-effect-blur`

{% hint style="info" %}
Enter the desired value for the blur effect of the backdrop.
{% 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.themeware.design/manual/header/search/configuration.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.