A checkbox list is used to give a user a way to select any number of a set of choices.
<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>
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.
<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>
The default size is medium. Small and large options are available.
<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>
<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>
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.
<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>
<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>
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.
<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>
>
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.
<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>
>
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.