Skip to main content
A select field is a dropdown component that allows users to choose one option from a list. It features keyboard navigation, accessibility support, and customizable styling for both the trigger and dropdown menu. This component allows defining options with different designs, which means you will need to read the docs of the UI Elements in which they are used to understand how the options of the select field will look like in each case.

​
Default Styling

By default, the Select Field uses Qonto’s branding: Default select 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 Select Field can be customized using the following CSS variables:
CSS VariableDescription & Accepted Values
--qonto-embed-input-select-gapGap between label, input, and error message (e.g., 4px, 8px).
--qonto-embed-input-select-label-font-sizeFont size for the label (e.g., 14px, 1em).
--qonto-embed-input-select-label-colorColor of the label text.
--qonto-embed-input-select-label-font-weightFont weight of the label (e.g., 400, bold).
--qonto-embed-input-select-text-font-sizeFont size for the selected text (e.g., 14px).
--qonto-embed-input-select-text-colorColor of the selected text.
--qonto-embed-input-select-backgroundBackground color of the select trigger.
--qonto-embed-input-select-borderBorder style for the select (e.g., 1px solid #ccc).
--qonto-embed-input-select-border-radiusBorder radius for the select (e.g., 4px, 8px).
--qonto-embed-input-select-paddingPadding inside the select (e.g., 7px 36px 7px 12px).
--qonto-embed-input-select-placeholder-colorColor of the placeholder text.
--qonto-embed-input-select-hover-backgroundBackground color when hovering over the select.
--qonto-embed-input-select-focus-border-colorBorder color when the select is focused.
--qonto-embed-input-select-focus-backgroundBackground color when the select is focused.
--qonto-embed-input-select-focus-border-shadowBox shadow when the select is focused (e.g., 0 0 0 4px rgba(0,0,0,0.1)).
--qonto-embed-input-select-active-border-colorBorder color when the dropdown is open.
--qonto-embed-input-select-disabled-backgroundBackground color when the select is disabled.
--qonto-embed-input-select-disabled-border-colorBorder color when the select is disabled.
--qonto-embed-input-select-disabled-text-colorText color when the select is disabled.
--qonto-embed-input-select-disabled-icon-colorIcon color when the select is disabled.
--qonto-embed-input-select-readonly-backgroundBackground color when the select is read-only.
--qonto-embed-input-select-error-border-colorBorder color when the select has an error.
--qonto-embed-input-select-error-message-font-sizeFont size for error messages (e.g., 12px).
--qonto-embed-input-select-error-message-colorColor of error messages.
--qonto-embed-input-select-icon-colorColor of the dropdown icon.
--qonto-embed-input-select-dropdown-backgroundBackground color of the dropdown menu.
--qonto-embed-input-select-dropdown-borderBorder style for the dropdown menu (e.g., 1px solid #ccc).
--qonto-embed-input-select-dropdown-border-radiusBorder radius for the dropdown menu (e.g., 4px).
--qonto-embed-input-select-dropdown-shadowBox shadow for the dropdown menu (e.g., 0 4px 8px rgba(0, 0, 0, 0.1)).
--qonto-embed-input-select-dropdown-max-heightMaximum height for the dropdown menu (e.g., 250px).
--qonto-embed-input-select-option-paddingPadding for each option in the dropdown (e.g., 8px 12px).
--qonto-embed-input-select-option-font-sizeFont size for options (e.g., 14px).
--qonto-embed-input-select-option-line-heightLine height for options.
--qonto-embed-input-select-option-colorColor of option text.
--qonto-embed-input-select-option-hover-backgroundBackground color when hovering over an option.
--qonto-embed-input-select-option-selected-backgroundBackground color for the selected option.
--qonto-embed-input-select-option-selected-colorText color for the selected option.
--qonto-embed-input-select-option-selected-font-weightFont weight for the selected option.
The Select Field supports full keyboard navigation (Arrow keys, Enter, Escape, Home, End) and is fully accessible with proper ARIA attributes. These behaviors are built into the component and cannot be customized via CSS.

​
Example

This example shows a customized Select Field: 
:root {
  --qonto-embed-input-select-gap: 8px;
  --qonto-embed-input-select-label-font-size: 16px;
  --qonto-embed-input-select-label-color: #374151;
  --qonto-embed-input-select-label-font-weight: 800;
  --qonto-embed-input-select-text-font-size: 16px;
  --qonto-embed-input-select-text-color: #111827;
  --qonto-embed-input-select-border: 3px solid #d1d5db;
  --qonto-embed-input-select-border-radius: 16px;
  --qonto-embed-input-select-padding: 10px 40px 10px 14px;
}
The result is a select field with rounded corners, more space and bigger texts: Customized select field style