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>

Rows

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

Description

We sometimes need to show the order of our list items vertically. By defining the number of rows, the list will flow from top to bottom and break to another column after the number of rows is filled. Scaling based on screen size can be optionally specified by the sm-rows, md-rows, and lg-rows props.

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
`smRows`	no		Same as `rows` prop for small screen sizes
`mdColumns`	no	`mdColumns`	Same as `columns` prop for medium and smaller screen sizes
`mdRows`	no		Same as `rows` prop for medium and smaller screen sizes
`lgColumns`	no	`columns`	Same as `columns` prop for large and smaller screen sizes
`lgRows`	no		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.
`rows`	no		The number of rows that the list of checkboxes should be rendered to.
`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