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"
  sm-columns="1"
  md-columns="2"
  lg-columns="3">
</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. Scaling based on screen size can be optionally specified by the sm-columns, md-columns, and lg-columns props.

Sizes



<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>

Description

The default size is medium. Small and large options are available.

Stacked List

<tk-multi-select
  options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
  selected='["Flobberworm mucus"]'
  columns="1">
</tk-multi-select>

Props

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

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.