multiple-choice-checklist
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.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" />

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>

Version compatibility
disabled
was introduced in version 4.75.0 of the JourneyApps Runtime.Version compatibility
label-case
was introduced in version 4.80.0 of the JourneyApps Runtime.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 check box options.
row
lists options horizontally; column
lists options vertically.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.The following component methods are available when an
id
is assigned to the component and component.multipleChoiceChecklist({id:'my-id'})
is called from JS/TS:Clear the selected option(s) of the
multiple-choice-checklist
.Programmatically scroll until the
multiple-choice-checklist
is visible in the view.Select an item by its label of the list of options of the
multiple-choice-checklist
.main.view.xml
<var name="favorite_colors" type="multiple-choice">
<option key="green">Green</option>
<option key="red">Red</option>
<option key="yellow">Yellow</option>
</var>
<multiple-choice-checklist id="my-checklist" bind="favorite_colors" label="Favorite Colors" />
main.js
function select() {
component.multipleChoiceChecklist({id: 'my-checklist'}).selectItem('Yellow');
}
Select an item by its index of the list of options of the
multiple-choice-checklist
. Note: Indexes begin at 1.main.view.xml
<var name="favorite_colors" type="multiple-choice">
<option key="green">Green</option>
<option key="red">Red</option>
<option key="yellow">Yellow</option>
</var>
<multiple-choice-checklist id="my-checklist" bind="favorite_colors" label="Favorite Colors" />
main.js
function select() {
component.multipleChoiceChecklist({id: 'my-checklist'}).selectItemByIndex(2);
// Selects "Red"
}
Last modified 9mo ago