Table of Contents


The content section is the middle part of the screen between the header and footer. By default it automatically selects a control for the question type, e.g. a date selector for a date question. By specifying a custom content object, more styles are available. This is especially useful for customizing lists.

color and colorDark

By default, the content background color is taken from the settings sheet. However, it is possible to override it on an individual page.

type bind::ct:content.color bind::ct:content.colorDark
select_one... #a0b0c0 #102030


Frame width around the content area of the page. Default is 16.

type name bind::ct:content.frameWidth
select_one animal animal 0

In this case, frameWidth was set to 0 in the second image.


The visual appearance of the question.

type name
select_one animal animal IconOnly

For select_one questions

  • (not specified)
  • IconOnly
  • TextOnly
  • TextBesideIcon
  • TextUnderIcon

For select_multiple questions:

  • (not specified)
  • IconInlay
  • IconOnly
  • TextOnly
  • TextBesideIcon

For number list groups:

  • (not specified)
  • IconOnly
  • TextOnly
  • TextBesideIcon

Number lists are a set of questions inside a group. The appearance column must be set to field-list to force all group questions to appear on the same page:

type name label appearance
begin group numberlist Number list IconOnly field-list
integer number1 Number 1
integer number2 Number 2
integer number3 Number 3
integer number4 Number 3
integer number5 Number 5
end group

For range questions:

type name parameters bind::ct:content.columns
range animal_count start=1 end=100 step=1 Grid 5

For a fixed number of image questions:

type name label appearance
begin group photogroup Group photos Grid field-list
image image1 Photo
image image2 Photo 2
image image3 Photo 3
image image4 Photo 4
end group

For a dynamic number of image questions:

type name label
begin repeat photogroup Repeat photos Grid
image image Photo
end repeat

Ignored for other question types.


The padding space between grid items. Requires style to be set.

type name bind::ct:content.padding
select_one animal animal 8

Padding values are 0, 4 and 8.


Number of columns for grids. Requires style to be set. Defaults to 2.

type name bind::ct:content.columns
select_one animal animal Grid 4

For example, column values below are 3, 5 and 10.


Show lines between cells for grids. Requires style to be set. Defaults to true.

type name bind::ct:content.lines
select_one animal animal IconOnly no

lines value below is yes and no.


Show border around the outside of a grid. Requires style to be set. Defaults to no if frameWidth is 0, yes otherwise.

type name bind::ct:content.border
select_one animal animal IconOnly yes

Border value is yes and no.


Border width for grid lines. Requires style to be set. Defaults to 2.

type name bind::ct:content.borderWidth
select_one animal animal IconOnly 2

borderWidth value is 2 and 4.


Size text font size. Requires style to be set. Defaults to 16. Note that the font is subject to scaling according to the Font size in the main Settings page.

type name bind::ct:content.fontSize
select_one animal animal IconOnly 14

fontSize values are 10, 14 and 18.


Set font to bold. Requires style to be set. Defaults to false.

type name bind::ct:content.fontBold
select_one animal animal IconOnly yes


Set height of individual items. Requires style to be set. Defaults to 48.

type name bind::ct:content.itemHeight
select_one animal animal IconOnly 48

itemHeight values are 48, 64 and 128.


A QML fragment to use instead of the built-in content. See Developer section. For example:

type name bind::ct:content.qml
integer animal_count qml fragment

To set the content to a blue rectangle, replace qml fragment above with the following:

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    color: "blue"
    Button {
        anchors.centerIn: parent
        text: "Click me"
        onClicked: parent.color = "red"

In the example, the content is blue, then changes to red when the button is clicked.


Base64 encoded QML (see qml above).


Name of a QML file which exists alongside other project files. This is not supported on ODK or KoBoToolbox, but can be used in Survey123.