# Inputs

Input settings in **Theme settings > Inputs** control default, hover, and focus styles for form fields across the storefront, including colors, horizontal padding, and whether the border wraps the field or appears on the bottom edge only.

## How to change theme inputs

{% stepper %}
{% step %}

#### Set default colors

* Open **Theme settings > Inputs**.
* Under **Default colors**, choose **Base** or **Custom** for **Type**.
* Set **Background** (Body, Shade 1–3, or Transparent when **Type** is **Base**).
* Set **Border**: with **Base**, choose **Subtle**, **Strong**, or **None**; with **Custom**, pick a color **Scheme** for the border.
  {% endstep %}

{% step %}

#### Set hover and focus colors

* Under **Hover colors**, set **Type**, **Background**, and **Border** the same way.
* Under **Focus colors**, set **Type**, **Background**, and **Border** for the active field.
  {% endstep %}

{% step %}

#### Set spacing and border style

* Under **Spacing**, toggle **Enable horizontal padding** if you want extra space inside text fields.
* Under **Style**, set **Border position** to **Full** or **Bottom**.
  {% endstep %}

{% step %}

#### Optional: align with theme borders

* Open **Theme settings > Borders** to adjust **Input radius** and **Input width** so fields match buttons and cards.
  {% endstep %}
  {% endstepper %}

### Notes on inputs

* **Type** chooses **Base** generated colors or **Custom** scheme-based borders.
* Focus **Border** on **Base** defaults to **Strong** so the active field is easy to see.
* **Bottom** **Border position** suits minimal or underline-style forms.

## Input settings

### Default colors

| Setting    | What it controls                                                               |
| ---------- | ------------------------------------------------------------------------------ |
| Type       | **Base** uses theme-generated colors; **Custom** enables a scheme for borders. |
| Background | Resting background: Body, Shade 1–3, or Transparent.                           |
| Border     | Resting border: Subtle, Strong, or None (**Base**), or a Scheme (**Custom**).  |

### Hover colors

| Setting    | What it controls                                                            |
| ---------- | --------------------------------------------------------------------------- |
| Type       | **Base** or **Custom** for hover, same pattern as default.                  |
| Background | Hover background: Body, Shade 1–3, or Transparent.                          |
| Border     | Hover border: Subtle, Strong, or None (**Base**), or a Scheme (**Custom**). |

### Focus colors

| Setting    | What it controls                                                                                            |
| ---------- | ----------------------------------------------------------------------------------------------------------- |
| Type       | **Base** or **Custom** for the focused field.                                                               |
| Background | Focus background: Body, Shade 1–3, or Transparent.                                                          |
| Border     | Focus border: Subtle, Strong, or None (**Base**), or a Scheme (**Custom**). Default **Strong** on **Base**. |

### Spacing

| Setting                   | What it controls                                   |
| ------------------------- | -------------------------------------------------- |
| Enable horizontal padding | Adds left and right padding inside inputs when on. |

### Style

| Setting         | What it controls                                           |
| --------------- | ---------------------------------------------------------- |
| Border position | **Full** (all sides) or **Bottom** (underline-style) only. |