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