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

# Text Field

A text field is a fundamental input component that allows users to enter and edit text. It supports labels, placeholders, error states, and disabled states for comprehensive form interactions.

## Default Styling

By default, the Text Field uses Qonto's branding:

<img src="https://mintcdn.com/qonto-6237c309/QufvOT9UjaI3vLxE/api-reference/sdk-libraries/doc-pages/img/text-field-default.png?fit=max&auto=format&n=QufvOT9UjaI3vLxE&q=85&s=97b63a463089a4ccf0f907d171dafcbc" alt="Default text field style" width="630" height="111" data-path="api-reference/sdk-libraries/doc-pages/img/text-field-default.png" />

## Customization Options

<Info>
  All customizable components are subject to being styled with [global CSS
  properties](./global-customizations) exposed by the Qonto Embed SDK. If no
  component-level style is applied by the SDK, the global styles will be used if
  they are defined.
</Info>

The Text Field can be customized using the following CSS variables:

| CSS Variable                                       | Description & Accepted Values                                             |
| -------------------------------------------------- | ------------------------------------------------------------------------- |
| `--qonto-embed-input-text-gap`                     | Gap between label, input, and error message (e.g., `4px`, `8px`).         |
| `--qonto-embed-input-text-label-font-size`         | Font size for the label (e.g., `14px`, `1em`).                            |
| `--qonto-embed-input-text-label-color`             | Color of the label text.                                                  |
| `--qonto-embed-input-text-label-font-weight`       | Font weight of the label (e.g., `400`, `bold`).                           |
| `--qonto-embed-input-text-text-font-size`          | Font size for the input text (e.g., `14px`).                              |
| `--qonto-embed-input-text-text-color`              | Color of the input text.                                                  |
| `--qonto-embed-input-text-background`              | Background color of the input.                                            |
| `--qonto-embed-input-text-border`                  | Border style for the input (e.g., `1px solid #ccc`).                      |
| `--qonto-embed-input-text-border-radius`           | Border radius for the input (e.g., `4px`, `8px`).                         |
| `--qonto-embed-input-text-padding`                 | Padding inside the input (e.g., `7px 11px`).                              |
| `--qonto-embed-input-text-placeholder-color`       | Color of the placeholder text.                                            |
| `--qonto-embed-input-text-focus-border-color`      | Border color when the input is focused.                                   |
| `--qonto-embed-input-text-focus-border-shadow`     | Box shadow when the input is focused (e.g., `0 0 0 4px rgba(0,0,0,0.1)`). |
| `--qonto-embed-input-text-disabled-background`     | Background color when the input is disabled.                              |
| `--qonto-embed-input-text-disabled-border-color`   | Border color when the input is disabled.                                  |
| `--qonto-embed-input-text-disabled-text-color`     | Text color when the input is disabled.                                    |
| `--qonto-embed-input-text-error-border-color`      | Border color when the input has an error.                                 |
| `--qonto-embed-input-text-error-message-font-size` | Font size for error messages (e.g., `12px`).                              |
| `--qonto-embed-input-text-error-message-color`     | Color of error messages.                                                  |

### Example

This example shows a customized Text Field:

```css theme={null}
:root {
  --qonto-embed-input-text-gap: 8px;
  --qonto-embed-input-text-label-font-size: 16px;
  --qonto-embed-input-text-label-color: #374151;
  --qonto-embed-input-text-label-font-weight: 700;
  --qonto-embed-input-text-text-font-size: 16px;
  --qonto-embed-input-text-text-color: #111827;
  --qonto-embed-input-text-background: #ffffff;
  --qonto-embed-input-text-border: 3px solid #d1d5db;
  --qonto-embed-input-text-border-radius: 16px;
  --qonto-embed-input-text-padding: 14px 14px;
  --qonto-embed-input-text-placeholder-color: #6d798d;
}
```

The result is a text field with increased padding, rounded corners, and larger typography:

<img src="https://mintcdn.com/qonto-6237c309/QufvOT9UjaI3vLxE/api-reference/sdk-libraries/doc-pages/img/text-field-customized.png?fit=max&auto=format&n=QufvOT9UjaI3vLxE&q=85&s=61b88431c4a0faaafbd193ec446dada8" alt="Customized text field style" width="641" height="117" data-path="api-reference/sdk-libraries/doc-pages/img/text-field-customized.png" />