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"]'
  show-toggles="false"
  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
`showToggles`	no	`true`	Set to false to hide toggles “Select All \| Unselect All”

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.
`allChecked`	Deprecated Returns true if all options have been checked, false if not every option has been checked