Skip to main content
An amount field is a specialized input component designed for entering monetary values. It provides automatic formatting for currency display, decimal handling, and locale-specific number formatting.

​
Default Styling

By default, the Amount Field uses Qonto’s branding and includes a currency indicator (EUR by default): Default amount 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 Amount Field can be customized using the following CSS variables:
CSS VariableDescription & Accepted Values
--qonto-embed-input-amount-gapGap between label, input, and error message (e.g., 4px, 8px).
--qonto-embed-input-amount-label-font-sizeFont size for the label (e.g., 14px, 1em).
--qonto-embed-input-amount-label-colorColor of the label text.
--qonto-embed-input-amount-label-font-weightFont weight of the label (e.g., 400, bold).
--qonto-embed-input-amount-borderBorder style for the input (e.g., 1px solid #ccc).
--qonto-embed-input-amount-border-radiusBorder radius for the input (e.g., 4px, 8px).
--qonto-embed-input-amount-paddingPadding inside the input (e.g., 8px 12px).
--qonto-embed-input-amount-currency-font-sizeFont size for the currency indicator (e.g., 14px).
--qonto-embed-input-amount-currency-colorColor of the currency indicator when input has value.
--qonto-embed-input-amount-currency-font-weightFont weight of the currency indicator.
--qonto-embed-input-amount-text-font-sizeFont size for the input text (e.g., 14px).
--qonto-embed-input-amount-text-colorColor of the input text.
--qonto-embed-input-amount-placeholder-colorColor of the placeholder and currency when empty.
--qonto-embed-input-amount-focus-border-colorBorder color when the input is focused.
--qonto-embed-input-amount-focus-border-shadowBox shadow when the input is focused (e.g., 0 0 0 4px rgba(0,0,0,0.1)).
--qonto-embed-input-amount-disabled-backgroundBackground color when the input is disabled.
--qonto-embed-input-amount-disabled-border-colorBorder color when the input is disabled.
--qonto-embed-input-amount-disabled-text-colorText color when the input is disabled.
--qonto-embed-input-amount-disabled-currency-colorCurrency indicator color when disabled.
--qonto-embed-input-amount-error-border-colorBorder color when the input has an error.
--qonto-embed-input-amount-error-message-colorColor of error messages.
The Amount Field automatically formats numbers based on the specified locale and handles decimal precision. The formatting and behavior are controlled by the component itself and cannot be customized via CSS.

​
Example

This example shows a customized Amount Field: 
:root {
  --qonto-embed-input-amount-gap: 16px;
  --qonto-embed-input-amount-label-font-size: 14px;
  --qonto-embed-input-amount-label-color: #333;
  --qonto-embed-input-amount-border: 5px solid #d1d5db;
  --qonto-embed-input-amount-border-radius: 16px;
  --qonto-embed-input-amount-padding: 12px;
  --qonto-embed-input-amount-currency-color: #6b7280;
  --qonto-embed-input-amount-text-color: #111827;
}
The result is an amount field with increased padding, thicker borders, rounded corners, and a custom color scheme: Customized amount field style