Links

multiple-choice-checklist

Overview

multiple-choice-checklist allows users to select multiple options from a list.
Version compatibility
multiple-choice-checklist was introduced in version 4.36.1 of the JourneyApps Container.
It was updated visually and the disabled attribute was introduced in version 4.75.0 of the JourneyApps Runtime.

Basic Example

main.view.xml
<var name="contact_methods" type="multiple-choice">
<option key="email">Email</option>
<option key="sms">SMS</option>
<option key="Post">Post</option>
</var>
​
<multiple-choice-checklist label="Preferred Contact Method" bind="contact_methods" />

Standard Attributes

bind

label

required

Advanced Attributes

align-content

align-label

checkbox-position

Version compatibility
checkbox-position was introduced in version 4.86.1 of the JourneyApps Runtime.
Optional
Type: left | right
Default: left
Specify where the checkbox is positioned in the component (relative to the option label).
main.view.xml
<columns>
<column>
<info>checkbox-position="left"</info>
<multiple-choice-checklist checkbox-position="left" bind="favorite_color" label="Favorite color" />
</column>
<column>
<info>checkbox-position="right"</info>
<multiple-choice-checklist checkbox-position="right" bind="favorite_color" label="Favorite color" />
</column>
</columns>

disabled

Version compatibility
disabled was introduced in version 4.75.0 of the JourneyApps Runtime.

label-case

Version compatibility
label-case was introduced in version 4.80.0 of the JourneyApps Runtime.

label-color

mode

Version compatibility
mode was introduced in version 4.83.0 of the JourneyApps Runtime.
Optional
Type: row | column
Default: column
Configure the layout of the list of options. row lists options horizontally; column lists options vertically.

modifier-text

on-change

When using multiple-choice-integer you can omit the key attribute on options. The array passed to the function assigned to on-change will correspond to the key starting from 0. E.g. [0, 2] corresponds to first and third options.

show-if and hide-if