A checkbox list is used to give a user a way to select any number of a set of choices.
<tk-multi-select
options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
selected='["Flobberworm mucus"]'
columns="4">
</tk-multi-select>
<hr>
<tk-multi-select
options='[{ "label": "Salamander blood", "value": "sb" }, { "label": "Lionfish spines", "value": "ls" }, { "label": "Flobberworm mucus", "value": "fm" }, { "label": "Honey water", "value": "hw" }]'
selected='["fm"]'
show-toggles="false"
columns="4"
sm-columns="1"
md-columns="2"
lg-columns="3">
</tk-multi-select>
The multi-select list renders a list of checkboxes based on a set of input options. The options can be a string array, or an array of objects with label
and value
keys. The checkboxes are rendered as a grid, with the number of columns controlled by the columns
input property.
Scaling based on screen size can be optionally specified by the sm-columns
, md-columns
, and lg-columns
props.
<tk-multi-select
columns="4"
size="small"
options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
selected='["Flobberworm mucus"]'>
</tk-multi-select>
<hr>
<tk-multi-select
columns="4"
size="medium"
options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
selected='["Flobberworm mucus"]'>
</tk-multi-select>
<hr>
<tk-multi-select
columns="4"
size="large"
options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
selected='["Flobberworm mucus"]'>
</tk-multi-select>
The default size is medium. Small and large options are available.
<tk-multi-select
options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
selected='["Flobberworm mucus"]'
columns="1">
</tk-multi-select>
Property | Required? | Default | Description |
---|---|---|---|
columns |
2 |
The number of columns that the list of checkboxes should be rendered to. | |
smColumns |
no | mdColumns |
Same as columns prop for small screen sizes |
mdColumns |
no | lgColumns |
Same as columns prop for medium and smaller screen sizes |
lgColumns |
no | columns |
Same as columns prop for large and smaller screen sizes |
options |
yes | An array of choices to render. This can be either an array of strings, or an array of objects with label and value properties. |
|
selected |
[] |
An array of choices to be pre-selected. If the input options are a atring array, then the elements of the array should match a string. If the input was an object array, then the elements of the selected array will match the value key of the input objects. Setting this value to undefined or null will not change the state of the checkboxes, or emit the check event |
|
showToggles |
no | true |
Set to false to hide toggles “Select All | Unselect All” |
Name | Description |
---|---|
check |
a string array of the currently selected choices whenever a checkbox is checked or unchecked. If no choices are selected, an empty array will be emitted. If the input was a string array, then the values of the array are what will be emitted. If the input was an object, then the value key of that object will be emitted. |
allChecked |
Deprecated Returns true if all options have been checked, false if not every option has been checked |