> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Editor - Inputs

> Configure input field colours, border thickness, and corner radius for forms across the storefront.

<Frame caption="Theme Editor > Inputs">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-inputs.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=fa6ab657475f4f8cebc68fd5ba388428" alt="Inputs settings panel in the theme editor" width="1920" height="1080" data-path="images/theme-editor-inputs.webp" />
</Frame>

The Inputs panel controls the appearance of text fields, dropdowns, and other form controls on your storefront — checkout forms, search bars, and quantity selectors all inherit these styles.

## Colors

| Setting    | Default   | Description                                               |
| ---------- | --------- | --------------------------------------------------------- |
| Background | `#FFFFFF` | Fill colour of input fields.                              |
| Border     | `#E4E6EB` | Border colour around input fields in their default state. |

## Border

| Setting       | Type   | Default | Range   | Description                                                       |
| ------------- | ------ | ------- | ------- | ----------------------------------------------------------------- |
| Thickness     | Slider | 1 px    | 0–4 px  | Border width around input fields. Set to 0 for borderless inputs. |
| Corner radius | Slider | 6 px    | 0–40 px | How rounded the input corners are. 0 gives sharp corners.         |

## CSS variables

<CodeGroup>
  ```css CSS variables theme={null}
  :root {
    --storefront-input-background-color: #FFFFFF;
    --storefront-input-border-color: #E4E6EB;
    --storefront-input-border-width: 1px;
    --storefront-input-border-radius: 6px;
  }
  ```
</CodeGroup>

## Related

<CardGroup cols={2}>
  <Card title="Buttons" icon="square" href="/docs/sales-channels/online-store/theme-editor/settings/buttons">
    Configure button styles.
  </Card>

  <Card title="Calendar" icon="calendar" href="/docs/sales-channels/online-store/theme-editor/settings/calendar">
    Customise the rental date picker.
  </Card>
</CardGroup>