Base

  • Colors
  • Icons
  • Logos
  • Shadows and Elevations
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Expandable image
  • Filters
  • Gallery card
  • Icon Button
  • Indicators
  • Lightbox image
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Segmented Controls
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toggle button
  • Typeahead

Form

  • Card Select
  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation
  • Tabs

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Toast
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message
  • Question card & Group Questions Container

Visualizations

  • Data Colors

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

Potions

Potions
Expand Copy
<tk-multi-select
  options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
  selected='["Flobberworm mucus"]'
  columns="4">

  <div slot="legend" class="mb-2x">Potions</div>
</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">

  <div slot="legend" class="mb-2x">Potions</div>
</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, value, and hint (optional) 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

Potions

Potions

Potions
Expand Copy
<tk-multi-select
  columns="4"
  size="small"
  options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
  selected='["Flobberworm mucus"]'>

  <div slot="legend" class="mb-2x">Potions</div>
</tk-multi-select>
<hr>
<tk-multi-select
  columns="4"
  size="medium"
  options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
  selected='["Flobberworm mucus"]'>
  <div slot="legend" class="mb-2x">Potions</div>
</tk-multi-select>
<hr>
<tk-multi-select
  columns="4"
  size="large"
  options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
  selected='["Flobberworm mucus"]'>
  <div slot="legend" class="mb-2x">Potions</div>
</tk-multi-select>

Description

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

Stacked List

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

  <div slot="legend" class="mb-2x">Potions</div>
</tk-multi-select>

Rows

Potions

Potions
Expand Copy
<tk-multi-select
  options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
  selected='["Flobberworm mucus"]'
  rows="2">
  <div slot="legend" class="mb-2x">Potions</div>
</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">
  <div slot="legend" class="mb-2x">Potions</div>
</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.

Block styling

Potions

Potions

Potions
Example error message
Copy
<tk-multi-select
block
columns="1"
options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
selected='["Flobberworm mucus"]'

>

  <div slot="legend" class="mb-2x">Potions</div>
</tk-multi-select>
<hr>
<tk-multi-select
  block
  columns="3"
  options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
  selected='["Flobberworm mucus"]'
>
  <div slot="legend" class="mb-2x">Potions</div>
</tk-multi-select>
<hr>
<tk-multi-select
  block
  columns="1"
  options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
  selected='["Flobberworm mucus"]'
>
  <div slot="legend" class="mb-2x">Potions</div>
  <div slot="error" class="l-inline-flex l-v-baseline t-base">
    <tk-icon aria-label="error" class="mr-2x mv-auto" name="alert" role="img" size="medium"></tk-icon>Example error message
  </div>
</tk-multi-select>

Error message

Potions
Example error message
Expand Copy
<tk-multi-select
columns="4"
options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
selected='["Flobberworm mucus"]'

>

  <div slot="legend" class="mb-2x">Potions</div>
  <div slot="error" class="l-inline-flex l-v-baseline t-base">
    <tk-icon aria-label="error" class="mr-2x mv-auto" name="alert" role="img" size="medium"></tk-icon>Example error message
  </div>
</tk-multi-select>

Description

The multi-select list generates checkboxes corresponding to a provided array of input options. The otherOption parameter allows for the inclusion of additional choices specified as an object, each containing label, value, text, placeholder, optionally hint keys. When selected, the ‘other’ option is presented with a textarea field. An onUpdated function is provided to capture and return any changes made including the other option textarea.

Other option

>
Expand Copy
<tk-multi-select
columns="1"
options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
otherOption='{"value": "other", "label": "Other", "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "placeholder": "Write other option", "ariaLabelText": "Other question", "textareaLabel": "Other textarea question", "preventPaste": "true"}'
block
selected='["other"]'

> </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, value, and hint (optional) 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.

None of the above

>
Expand Copy
<tk-multi-select
columns="1"
options='["Salamander blood","Lionfish spines","Flobberworm mucus","Honey water"]'
otherOption='{"value": "other", "label": "Other", "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "placeholder": "Write other option", "ariaLabelText": "Other question", "textareaLabel": "Other textarea question", "preventPaste": "true"}'
block
none-of-the-above='true'
selected='["other"]'

> </tk-multi-select>
> 

Description

The none-of-the-above prop is a boolean attribute that can be added to the component to include a “None of the above” option in the list of checkboxes. When this option is selected, all other checkboxes are automatically deselected, ensuring that only the “None of the above” option remains selected. Conversely, if any other checkbox is selected while the “None of the above” option is selected, the “None of the above” option will be deselected.