Comboboxitem Formitem component

Combobox component

The component implements a combobox, allowing the user to only input values from a predetermined set of values. The combobox values can be filtered by the user. The component supports sorting, and the set of values can be uploaded from a database as well.

The component can be in multi-select mode or single select. This is a multi select combobox:

The use of the component is recommended, when the selectable set of values is small. If there are too many selectable values, the use of the combobox might slow down. If using a lot of selectable values, the SelectorItem component is recommended instead, since it handles larger amounts of selectable values better.

This component is a form item, which means it can be placed, and it will be handled by the Form component. It can be used on its own, but in this case the developer must implement event and value handlers.

A combobox can be created in multiple ways:

  1. It can be created, programmatically. This means that the component is created manually, it is placed on the interface manually, and its set of values are also defined manually, through the code.

  2. It can be created by using a DataDescriptor. The component's set of values is defined in this DataDescriptor. In this chase, the DataDescriptor column has no mandatory parameters, but a set of values must be specified within the values tag.  If it is not specified, the component will have an empty set of values on the interface. A combobox DataDescriptor:

    Creating a combobox, based on the DataDescriptor column above:

  3. The component can be based on two DataDescriptors. One can specify the component itself, and the other can contain the component values. In this case, the name of the DataDescriptor, that contains the values must be specified in the component DataDescriptor's column. The data column and displayed column's name must be specified as well. Data in the data column will be saved in the component DataDescriptor, and the display column's values will be displayed on the interface.  For example, if you want the user to pick a country, but only want to save the country ID in the database, you should follow the example: DataDescriptor containing the values

    Combobox DataDescriptor

    Creating the combobox, based on the above DataDescriptors

Supported events:

Show, Hide, Change, Focus, Animations, HotKey, Drag&Drop

Style customization


Default value

Derived value

Computed value


$combo-bg-color-active $primary $combo-bg-color-active-->$primary-->#079e97 #079e97 Background color of a selected option and hover.
$combo-bg-color-active-old $combo-border-color $combo-bg-color-active-old-->$combo-border-color-->#ced4da #ced4da Background color of the previous option.
$combo-color-active $white $combo-color-active-->$white-->#fff #fff Color of the currently selected option and hover.
$combo-color-active-old inherit inherit Label color of the previous option.
$combo-absolute-border-color $combo-border-color $combo-absolute-border-color-->$combo-border-color-->#ced4da #ced4da Frame color for the currently opened select container.
$combo-absolute-input-border-color $combo-border-color $combo-absolute-input-border-color-->$combo-border-color-->#ced4da #ced4da Input search field frame color for the currently opened select container.
$combo-absolute-input-margin $spacer * 0.3 $combo-absolute-input-margin-->$spacer * 0.3-->1rem * 0.3 0.3rem The area around the input search field around the currently opened select container.
$combo-absolute-input-padding $spacer * 0.3 $combo-absolute-input-padding-->$spacer * 0.3-->1rem * 0.3 0.3rem The area inside the input search field around the currently opened select container.
$combo-border-color-active $primary $combo-border-color-active-->$primary-->#079e97 #079e97 Active combobox frame color.
$combo-option-padding $spacer * 0.45 $combo-option-padding-->$spacer * 0.45-->1rem * 0.45 0.45rem Spacing around option labels.
$combo-option-font-size inherit inherit Option label size.
$combo-option-color inherit inherit Option label color.
$combo-option-font-weight $font-weight-base $combo-option-font-weight-->$font-weight-base-->$font-weight-normal-->400 400 Option label font weight.
$combo-option-font-style inherit inherit Option label font style.
$combo-option-bg-color $white $combo-option-bg-color-->$white-->#fff #fff Option label background color.
$combo-selected-color $body-color $combo-selected-color-->$body-color-->$gray-900-->#212529 #212529 Color of the currently selected option’s label.
$combo-selected-font-size inherit inherit Size of the currently selected option label.
$combo-selected-font-weight $font-weight-base $combo-selected-font-weight-->$font-weight-base-->$font-weight-normal-->400 400 Font weight of the currently selected option label.
$combo-selected-padding 0 ($spacer * 1.8) 0 ($spacer * 0.55) $combo-selected-padding-->0 ($spacer * 1.8) 0 ($spacer * 0.55)-->0 (1rem * 1.8) 0 (1rem * 0.55) 0 1.8rem 0 0.55rem The area around the label in a select field.
$combo-caret-color $gray-600 $combo-caret-color-->$gray-600-->#6c757d #6c757d Dropdown arrow color.
$combo-placeholder-color $gray-600 $combo-placeholder-color-->$gray-600-->#6c757d #6c757d Combobox placeholder color.
$combo-border-color $gray-400 $combo-border-color-->$gray-400-->#ced4da #ced4da Combobox frame color.

Related pages