`combobox`

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

Configuration

For general configuration options, see General component configuration.

Specific configuration

type ("combobox")

Type of component.

forceSelect (boolean)

Forces the selection of an option from the list. If deactivated, values outside the list can also be used. Activated by default.

multiSelect (boolean)

Allows multiple options to be selected from the list.

options (array<ComboboxOption> | Binding)

A list of possible options from which the user can select a value. An option must contain a value and a label (for the display). There are two ways to define the options of the ComboBox:

List: the list of options can be specified directly in the definition of the ComboBox.
String: Per Data binding.

value (Binding | number)

Value of the field.

General configuration

In addition to the configurations valid for all Configurationsthe following configurations can optionally be set: disabled, errorTarget, icon, labels, label Settings, onChange, readOnly, required.

Example

combobox.json

{
  "$schema": "https://forms.virtimo.net/5.1.0/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "container",
      "label": "Combobox Component Example",
      "components": [
        {
          "type": "combobox",
          "multiSelect": true,
          "label": "Selection",
          "options": [
            { "value": "foo", "label": "FOO" },
            { "value": "bar", "label": "BAR" }
          ]
        },
        {
          "type": "combobox",
          "forceSelect": false,
          "label": "Selection Binding",
          "options": "${/data/options}"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "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 separate window

Keywords: