MultipleSelect

MultipleSelect can be used when the user must choose one or more values

On this page:

Usage

MultipleSelect is often used in forms to collect input from users, allowing them to choose one or more options from a long list of alternatives. MultipleSelect also provides support for local search/filtering. Like the Checkbox component, MultipleSelect stores the selections as a comma-separated list.

Anatomy

Related

• For multiple choices with few options, use Checkboxes.
• For single selection with few options, use RadioButtons.
• For single selection with many options, use Dropdown.

Properties

The following is an autogenerated list of the properties available for MultipleSelect based on the component’s JSON schema file (linked below).

JSON schema

Required properties: id,type

Configuration

Add component

{
  "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
  {
    "data": {
      "layout": [
        {
          "id": "MultipleSelect-id",
          "type": "MultipleSelect",
          "dataModelBindings": {
            "simpleBinding": ""
          }
        }
      ]
    }
  }
}

Text (textResourceBindings)

You can create a new text by clicking on the plus sign or select an existing one by clicking on the magnifying glass. See Adding and Editing Texts in an App for more information.

Text can be added directly as a text string or by providing the key to a [text resource].(/app/development/ux/texts/#add-and-change-texts-in-an-application).

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  "type": "Checkboxes",
  "textResourceBindings": {
          "title": "",
          "description": "",
          "help": "",
          "shortName": "",
          "tableTitle": ""
        }
}

Data Model

To store and manipulate the data collected by the component, the component must be linked to a field in a data model. The option values are stored as strings.

Select the field you want to link the component to from the dropdown menu. If there are no fields available, you must first upload a data model.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "dataModelBindings": {
    "simpleBinding": "MyDataModel.SomeField"
    }
}

Field is read-only (readOnly)

Disables the component when checked (true).

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "readOnly": true
}

Example read-only component

Required (required)

Field is required when enabled (true) and a star is shown after the heading.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "required": false
}

Preselected option (preselectedOptionsIndex)

Sets a preselected value. Options are zero-indexed, so the first option is 0, the second is 1, and so on.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "preselectedOptionsIndex": 0
}

Autocomplete (autocomplete)

The HTML autocomplete attribute lets you specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "autocomplete": "given-name"
  
}

Summary (renderAsSummary)

Indicates whether the field should be included in a summary or not (default: false).

{
  "id": "komponent-id",
  ...
  "renderAsSummary": false
}

Hidden (hidden)

Indicates whether the field should be hidden or not (default: false).

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "hidden": false
}

Page Break (pageBreak)

Indicates whether a page break should be added before or after the component. Can be either: auto (default), always, or avoid.

{
  "id": "komponent-id",
  ...
  "pageBreak": {
    "breakBefore": "auto",
    "breakAfter": "auto"
  }
}

Horizontal alignment with grid

The grid property controls horizontal alignment based on a 12-column layout. Items are allocated fractions of 12 which sets their width relative to the screen width. In the example below, we set the component’s width to 2/12 of the screen width for all screen sizes (from xs and up).

{
  "id": "komponent-id",
  ...
  "grid": {
      "xs": 2,
    }
}

You can also use grid to place items side by side.

See Components placed side by side (grid) for details and examples.