Multi-select List

A checkbox list is used to give a user a way to select any number of a set of choices.

Multi-select List


<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"]'
  columns="4">
</tk-multi-select>

Description

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.

Props

Property Required? Default Description
columns 2 The number of columns that the list of checkboxes should be rendered to.
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

Events

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.