Skip to main content

Checkbox

This widget displays a checkbox.

{
"name": "agree-checkbox",
"type": "checkbox",
"params": {...}
}

Text

This is how a checkbox with text looks. The prompt property shows text near the checkbox.

Example of a checkbox

{
"name": "my-checkbox",
"type": "checkbox",
"params": {
"prompt": "I approve the design."
}
}

Checkbox value

The value property defines whether a checkbox is selected or not. In the following example, the value is false.

Value of checkbox is changing by click

{
"name": "my-checkbox",
"type": "checkbox",
"params": {
"prompt": "I approve the design.",
"value": false
}
}

Managing other widgets by clicking a checkbox

In the following example, we activate the Finish button by a checkbox.

It works because the Finish button refers to the value of the checkbox.

Checkbox enables the Finish button

{
"name": "my-checkbox",
"type": "checkbox",
"params": {
"prompt": "I approve the design.",
"value": false
}
},
{
"name": "my-finish-button",
"type": "finish-button",
"params": {
"enabled": "{{$['my-checkbox']._}}"
}
}
note

You can write "{{$['my-checkbox'].value}}" instead of "{{$['my-checkbox']._}}". To learn details about syntax of dynamic expressions, read the Dynamic expressions article.

Auto reset

If selected, a checkbox will stay selected, even when you go back to previous steps and then return. This is the default behavior.

Auto reset stays the checkbox selected.

If you want to reset the checkbox value in this case, use the autoReset parameter.

Auto reset makes the checkbox unselected.

{
"name": "my-checkbox",
"type": "checkbox",
"params": {
"prompt": "I approve the result.",
"value": false,
"autoReset": true
}
}

Params

NameTypeDescriptionDefault value
promptstringtext associated with checkboxempty string
valuebooleanif true, the checkbox is selectedfalse
autoResetbooleanif true, it resets the checkboxfalse
Was this page helpful?