Checkboxes

Input element that allows the user to select or deselect choices for one or more options.

Usage

Checkboxes are often used in forms to gather input from the user, allowing them to select one or more options from a list.

Use checkboxes when:

• Users can select multiple options from a list.
• An explicit choice needs to be made to use the settings (e.g., confirming that the user has read a document).

Anatomy

Style

• Checkboxes should always have an associated label on the right side.

Best Practices

• Checkboxes with disabled options should be avoided. If an option is unavailable, it should be removed, and an explanation should be provided for why the option is missing.

Content guidelines

• Keep labels short and descriptive.
• Start all labels with a capital letter.
• Do not include punctuation after labels.

Related

• For a more compact way to display multiple options with multiple selection, use MultipleSelect.
• If the user can only select one option from a list, use RadioButtons.
• For a more compact way to display multiple options with single selection, use Dropdown.

Properties

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

JSON schema

Required properties: id,type

Configuration

Add component

{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
  {
    "data": {
      "layout": [
        {
          "id": "Image-id",
          "type": "Image",
          "image": {
            "src": {},
            "width": "100%",
            "align": "center"
          }
        }
      ]
    }
  }
}

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].(/altinn-studio/reference/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"
    }
}

Adding Options

Options can be added manually or by using code lists.

Manually (options)

Select “Manuelt” and click “Legg til flere” to add a new option. Choose or create a new text to add a label (label).

The option comes with a pre-filled value (value), which is the data that is stored when the user makes a selection. The value is stored as a string and can be changed as you wish.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "options": [
          {
            "label": "Alternativ 1",
            "value": "1"
          }
        ]
}

Code List (optionsId)

A code list is a predefined list of options.

To add options from a code list, select “Kodeliste” and enter a code list ID. To use a custom (dynamic) code list, click “Bytt til egendefinert kodeliste” (switch to custom code list).

If you wish to secure dynamic code lists, you can check this option:

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "optionsId": "land",
  "secure": true
}

Source (source)

One way to add options is by linking the component to a code list based on form data stored within the app itself. You can do this by adding a source (source); please refer to the documentation for instructions on how to configure this.

Settings in Altinn Studio.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "source": {
    "group": "some.group",
    "label": "dropdown.label",
    "value": "some.group[{0}].someField",
    "description": "",
    "helpText": ""
  }
}
...

Documentation for code lists

• Link a Component to a Code List
• Static Code Lists
• Dynamic Code Lists
• Code lists based on repeating groups from the data model

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
}

Layout (layout)

Displays the alternatives in a column (column) (default for more than two options) or row (row) (default for up to two options).

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "layout": "row"
}

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
}

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.

App/ui/layouts/{page}.json

{
  "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.