Pre-selection

Making one option selected by default

In some cases it is desirable that one of the options is pre-selected. There are different ways to achieve this.

1. In the data model, you can prefill the field with the desired value. Note that the value must also belong to one of the valid options for components linked to this field in the data model, otherwise the value will be automatically cleaned up.
2. While filling out the form, you can also use data processing to set the field to a desired pre-selected value. Beware that in some cases it is important to allow the user to not choose an option. If the field is simply overwritten when it lacks a value, the user will not be able to remove a pre-selected option using this approach.
3. Use the preselectedOptionIndex property, as described here. This allows the component itself to automatically choose a numbered position in the list of options as pre-selected.

The preselectedOptionIndex property

This property allows you to choose an option as pre-selected. It takes an integer as an argument, which is the index of the option that should be pre-selected. The index starts at 0 for the first option, 1 for the second option, etc.

{
  "id": "my-component-id",
  "type": "Checkboxes",
  ...
  "options": [
    { "value": "red", "label": "Red" },
    { "value": "blue", "label": "Blue" },
    { "value": "green", "label": "Green" }
  ],
  "preselectedOptionIndex": 1
}

In the configuration above, “Blue” will be pre-selected when the component is displayed. The user can still choose another option, and since this is a multi-select component, the user can also remove the pre-selection by clicking the pre-selected option again.

This functionality follows a set of rules:

1. If the data model already has a value for the field, the pre-selection will not be set.
2. If a pre-selected value has already been set earlier (and e.g. deselected), this will not happen again as long as the app is open in the browser. If the user reloads the page, the pre-selection may be set again.
3. The pre-selection is set as soon as the page has loaded and the components are ready, regardless of whether the component is visible on the screen or not.
4. Pre-selected values are not set for components that are hidden using dynamics. If the component is shown again later, the pre-selection may be set.
5. The preselected option is determined before sorting is applied, but after filtering.