`combobox`

This component represents a combo box. The combo box allows users to select one of the predefined values.

Configuration

For general configuration options, see General Component Configuration.

Specific Configuration

type ("combobox"): Component type.
forceSelect (boolean): Forces the selection of an option from the list. If disabled, values outside the list can also be used. Enabled by default.
multiSelect (boolean): Allows multiple options to be selected from the list. Affects the expected data type of value.
options ( array<ComboboxOption> | Binding): A list of possible options from which You can select a value. An option must contain a value (number | string) and a label (MultiLanguageDefinition) for display.
value (Binding | number | string | array<number | string>): Field value. If multiSelect is enabled, a array<number | string> is expected (or a corresponding binding); otherwise, a single value (number | string).

General Configuration

In addition to the configurations that apply to all, the following configurations can optionally be set: //boxLabel settings, disabled, errorTarget, icon, Label, Label settings, onChange, readOnly, required.

Custom Styling

The visual design of the combo box is primarily controlled via global variables. CSS can be used specifically for certain deviations.

The attribute cls , you can apply your own CSS rules. The component provides the following standard styling targets for this purpose:

.combobox: Styles for the combo box container. In the case of multiSelect, use .combobox, .combobox div.
.combobox-label / .label: Direct access to the combo box Label.
.combobox .value: Access to the combo box’s input element. In the case of multiSelect, the input elements can be accessed using .combobox .value + div.

Example

combobox.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".combobox.foo .value { color: rgb(0, 15, 185)} .combobox.bar .value { color: rgb(185, 15, 0)}"
    }
  },
  "components": [
    {
      "type": "container",
      "label": "Combobox Component Example",
      "components": [
        {
          "type": "combobox",
          "multiSelect": true,
          "label": "Selection",
          "value": "${/data/c0}",
          "options": [
            { "value": 0, "label": "Option 0" },
            { "value": 1, "label": "Option 1" },
            { "value": 2, "label": "Option 2" }
          ]
        },
        {
          "type": "combobox",
          "forceSelect": false,
          "cls": "${/data/c1}",
          "label": "Selection Binding",
          "value": "${/data/c1}",
          "options": "${/data/options}"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "c0": [0, 2],
      "c1": "bar",
      "options": [
        {
          "value": "foo",
          "label": {
            "MULTI_LANGUAGE": {
              "de": "FOO_DE",
              "en": "FOO_EN"
            }
          }
        },
        {
          "value": "bar",
          "label": {
            "MULTI_LANGUAGE": {
              "de": "BAR_DE",
              "en": "BAR_EN"
            }
          }
        }
      ]
    }
  }
}

Embedded preview

Open preview in a separate window

Keywords: