Skip to main content
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: Default text field style

​
Customization Options

All customizable components are subject to being styled with global CSS properties 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.
The Text Field can be customized using the following CSS variables:
CSS VariableDescription & Accepted Values
--qonto-embed-input-text-gapGap between label, input, and error message (e.g., 4px, 8px).
--qonto-embed-input-text-label-font-sizeFont size for the label (e.g., 14px, 1em).
--qonto-embed-input-text-label-colorColor of the label text.
--qonto-embed-input-text-label-font-weightFont weight of the label (e.g., 400, bold).
--qonto-embed-input-text-text-font-sizeFont size for the input text (e.g., 14px).
--qonto-embed-input-text-text-colorColor of the input text.
--qonto-embed-input-text-backgroundBackground color of the input.
--qonto-embed-input-text-borderBorder style for the input (e.g., 1px solid #ccc).
--qonto-embed-input-text-border-radiusBorder radius for the input (e.g., 4px, 8px).
--qonto-embed-input-text-paddingPadding inside the input (e.g., 7px 11px).
--qonto-embed-input-text-placeholder-colorColor of the placeholder text.
--qonto-embed-input-text-focus-border-colorBorder color when the input is focused.
--qonto-embed-input-text-focus-border-shadowBox shadow when the input is focused (e.g., 0 0 0 4px rgba(0,0,0,0.1)).
--qonto-embed-input-text-disabled-backgroundBackground color when the input is disabled.
--qonto-embed-input-text-disabled-border-colorBorder color when the input is disabled.
--qonto-embed-input-text-disabled-text-colorText color when the input is disabled.
--qonto-embed-input-text-error-border-colorBorder color when the input has an error.
--qonto-embed-input-text-error-message-font-sizeFont size for error messages (e.g., 12px).
--qonto-embed-input-text-error-message-colorColor of error messages.

​
Example

This example shows a customized Text Field: 
: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: Customized text field style