multiple-choice-checklist
Overview
multiple-choice-checklist
allows users to select multiple options from a list.
Basic Example
<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
bindbind
label
labellabel
required
requiredrequired
Advanced Attributes
align-content
align-contentalign-content
align-label
align-labelalign-label
checkbox-position
checkbox-position
Optional
Type: left
| right
Default: left
Specify where the checkbox is positioned in the component (relative to the option label).
<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
disableddisabled
id
idid
label-case
label-caselabel-case
label-color
label-colorlabel-color
mode
mode
Optional
Type: row
| column
Default: column
Configure the layout of the list of check box options. row
lists options horizontally; column
lists options vertically.
modifier-text
modifier-textmodifier-text
on-change
on-changeon-change
show-if
and hide-if
show-ifhide-ifshow-if
and hide-if
Component Methods
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
clear
Clear the selected option(s) of the multiple-choice-checklist
.
scrollIntoView
scrollIntoView
Programmatically scroll until the multiple-choice-checklist
is visible in the view.
selectItem
selectItem
Select an item by its label of the list of options of the multiple-choice-checklist
.
<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" />
function select() {
component.multipleChoiceChecklist({id: 'my-checklist'}).selectItem('Yellow');
}
selectItemByIndex
selectItemByIndex
Select an item by its index of the list of options of the multiple-choice-checklist
. Note: Indexes begin at 1.
<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" />
function select() {
component.multipleChoiceChecklist({id: 'my-checklist'}).selectItemByIndex(2);
// Selects "Red"
}
Last updated