> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/manual/layout/forms/configuration.md).

# Configuration

## Basic configuration

***

### Layout type

**Field type**:\
Select

**Available values**:\
• default\
• underlined

**Example value**:\
`underlined`

**Path to the configuration**:\
Tab "Layout" => Block "Forms" => Section "Basic configuration"

**Technical name**:\
`twt-forms-layout-type`

## Colour configuration

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`#222222`

**Path to the configuration**:\
Tab "Layout" => Block "Forms" => Section "Colour configuration"

**Technical name**:\
`twt-forms-input-color`

***

### Text colour @hover

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Layout" => Block "Forms" => Section "Colour configuration"

**Technical name**:\
`twt-forms-input-color-hover`

{% hint style="info" %}
**Note**: This is a special color that only applies to certain layouts.
{% endhint %}

***

### Text colour @focus

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Layout" => Block "Forms" => Section "Colour configuration"

**Technical name**:\
`twt-forms-input-focus-color`

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`#cccccc`

**Path to the configuration**:\
Tab "Layout" => Block "Forms" => Section "Colour configuration"

**Technical name**:\
`twt-forms-input-border-color`

***

### Border colour @hover

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Layout" => Block "Forms" => Section "Colour configuration"

**Technical name**:\
`twt-forms-input-border-color-hover`

{% hint style="info" %}
**Note**: This is a special color that only applies to certain layouts.
{% endhint %}

***

### Border colour @focus

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Layout" => Block "Forms" => Section "Colour configuration"

**Technical name**:\
`twt-forms-input-focus-border-color`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#fafafa`

**Path to the configuration**:\
Tab "Layout" => Block "Forms" => Section "Colour configuration"

**Technical name**:\
`twt-forms-input-background-color`

***

### Background colour @focus

**Field type**:\
Color picker

**Example value**:\
`#e7e7e7`

**Path to the configuration**:\
Tab "Layout" => Block "Forms" => Section "Colour configuration"

**Technical name**:\
`twt-forms-input-focus-background-color`

***

### Placeholder colour

**Field type**:\
Color picker

**Example value**:\
`#8e8e8e`

**Path to the configuration**:\
Tab "Layout" => Block "Forms" => Section "Colour configuration"

**Technical name**:\
`twt-forms-input-placeholder-color`

## Colour configuration (Checks & radios)

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#cccccc`

**Path to the configuration**:\
Tab "Layout" => Block "Forms" => Section "Colour configuration (Checks & radios)"

**Technical name**:\
`twt-forms-check-input-background-color`

***

### Background colour @checked

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Layout" => Block "Forms" => Section "Colour configuration (Checks & radios)"

**Technical name**:\
`twt-forms-check-input-checked-background-color`

## Typography

***

### Font size

**Field type**:\
Number field

**Example value**:\
`15`

**Path to the configuration**:\
Tab "Layout" => Block "Forms"

**Technical name**:\
`twt-forms-input-font-size`