Select Field

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:

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 Variable	Description & Accepted Values
`--qonto-embed-input-select-gap`	Gap between label, input, and error message (e.g., `4px`, `8px`).
`--qonto-embed-input-select-label-font-size`	Font size for the label (e.g., `14px`, `1em`).
`--qonto-embed-input-select-label-color`	Color of the label text.
`--qonto-embed-input-select-label-font-weight`	Font weight of the label (e.g., `400`, `bold`).
`--qonto-embed-input-select-text-font-size`	Font size for the selected text (e.g., `14px`).
`--qonto-embed-input-select-text-color`	Color of the selected text.
`--qonto-embed-input-select-background`	Background color of the select trigger.
`--qonto-embed-input-select-border`	Border style for the select (e.g., `1px solid #ccc`).
`--qonto-embed-input-select-border-radius`	Border radius for the select (e.g., `4px`, `8px`).
`--qonto-embed-input-select-padding`	Padding inside the select (e.g., `7px 36px 7px 12px`).
`--qonto-embed-input-select-placeholder-color`	Color of the placeholder text.
`--qonto-embed-input-select-hover-background`	Background color when hovering over the select.
`--qonto-embed-input-select-focus-border-color`	Border color when the select is focused.
`--qonto-embed-input-select-focus-background`	Background color when the select is focused.
`--qonto-embed-input-select-focus-border-shadow`	Box shadow when the select is focused (e.g., `0 0 0 4px rgba(0,0,0,0.1)`).
`--qonto-embed-input-select-active-border-color`	Border color when the dropdown is open.
`--qonto-embed-input-select-disabled-background`	Background color when the select is disabled.
`--qonto-embed-input-select-disabled-border-color`	Border color when the select is disabled.
`--qonto-embed-input-select-disabled-text-color`	Text color when the select is disabled.
`--qonto-embed-input-select-disabled-icon-color`	Icon color when the select is disabled.
`--qonto-embed-input-select-readonly-background`	Background color when the select is read-only.
`--qonto-embed-input-select-error-border-color`	Border color when the select has an error.
`--qonto-embed-input-select-error-message-font-size`	Font size for error messages (e.g., `12px`).
`--qonto-embed-input-select-error-message-color`	Color of error messages.
`--qonto-embed-input-select-icon-color`	Color of the dropdown icon.
`--qonto-embed-input-select-dropdown-background`	Background color of the dropdown menu.
`--qonto-embed-input-select-dropdown-border`	Border style for the dropdown menu (e.g., `1px solid #ccc`).
`--qonto-embed-input-select-dropdown-border-radius`	Border radius for the dropdown menu (e.g., `4px`).
`--qonto-embed-input-select-dropdown-shadow`	Box shadow for the dropdown menu (e.g., `0 4px 8px rgba(0, 0, 0, 0.1)`).
`--qonto-embed-input-select-dropdown-max-height`	Maximum height for the dropdown menu (e.g., `250px`).
`--qonto-embed-input-select-option-padding`	Padding for each option in the dropdown (e.g., `8px 12px`).
`--qonto-embed-input-select-option-font-size`	Font size for options (e.g., `14px`).
`--qonto-embed-input-select-option-line-height`	Line height for options.
`--qonto-embed-input-select-option-color`	Color of option text.
`--qonto-embed-input-select-option-hover-background`	Background color when hovering over an option.
`--qonto-embed-input-select-option-selected-background`	Background color for the selected option.
`--qonto-embed-input-select-option-selected-color`	Text color for the selected option.
`--qonto-embed-input-select-option-selected-font-weight`	Font 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:

​Default Styling

​Customization Options

​Example

Default Styling

Customization Options

Example