Get help Color blind mode Low vision mode

Multiselect Ready

Select lets user choose multiplse options from an options menu. Consider using select if there is no need for multiple option selection. The amount of options should be limited.

Examples #

Open in new window 
<duet-multiselect id="country" label="Chooce country" label-hidden placeholder="Country"></duet-multiselect>
<duet-multiselect id="city" label="Chooce city" label-hidden placeholder="City"></duet-multiselect>

<script>
  (function(){
    var country = document.querySelector("#country")

    // Set select menu items and their values
    country.items = [
      { label: "Finland", value: "1" },
      { label: "Sweden", value: "2" },
      { label: "Norway", value: "3" },
    ]

    var city = document.querySelector("#city")

    // Set select menu items and their values
    city.items = [
      { label: "Helsinki", value: "1" },
      { label: "Tampere", value: "2" },
      { label: "Vantaa", value: "3" },
      { label: "Espoo", value: "4" },
      { label: "Hyvinkää", value: "5" },
      { label: "Kouvola", value: "6" },
      { label: "Turku", value: "7" },
    ]

    // Listen for change events in the select
    country.addEventListener("duetChange", function (e) {
      console.log("Change event detected in country multiselect:", e.detail)
    })
    city.addEventListener("duetChange", function (e) {
      console.log("Change event detected in city multiselect:", e.detail)
    })
  }())
</script>
Open in new window 
<duet-multiselect
  id="zip"
  label="Chooce zip"
  label-hidden
  placeholder="Zip"
  items='[
    {"label": "11100", "value": "11100"},
    {"label": "22200", "value": "22200"}
  ]'
></duet-multiselect>

<script>
  (function(){
    var zip = document.querySelector("#zip")

    // Listen for change events in the multiselect
    country.addEventListener("duetChange", function (e) {
      console.log("Change event detected in zip multiselect:", e.detail)
    })
  }())
</script>
Open in new window 
<duet-multiselect id="animal" label="Chooce animal" label-hidden placeholder="Animal" all-controls></duet-multiselect>

<script>
  (function(){
    var animal = document.querySelector("#animal")

    // Set select menu items and their values
    animal.items = [
      { label: "Anas punctata", value: "1" },
      { label: "Aonyx capensis", value: "2" },
      { label: "Bubalus arnee", value: "3" },
      { label: "Castor fiber", value: "4" },
      { label: "Colaptes campestroides", value: "5" },
      { label: "Colobus guerza", value: "6" },
      { label: "Damaliscus dorcas", value: "7" },
      { label: "Dicrurus adsimilis", value: "8" },
      { label: "Francolinus coqui", value: "9" },
      { label: "Lamprotornis nitens", value: "10" },
      { label: "Melophus lathami", value: "11" },
      { label: "Neotis denhami", value: "12" },
      { label: "Ovis musimon", value: "13" },
      { label: "Paraxerus cepapi", value: "14" },
      { label: "Pelecans onocratalus", value: "15" },
      { label: "Phoca vitulina", value: "16" },
      { label: "Phoeniconaias minor", value: "17" },
      { label: "Plegadis falcinellus", value: "18" },
      { label: "Stercorarius longicausus", value: "19" },
      { label: "Ursus americanus", value: "20" },
    ]

    // Listen for change events in the select
    animal.addEventListener("duetChange", function (e) {
      console.log("Change event detected in animal multiselect:", e.detail)
    })
  }())
</script>
Open in new window 
<duet-multiselect id="animals-and-gods" label="Chooce animals and gods"></duet-multiselect>

<script>
  (function(){
    const multiselect = document.querySelector("#animals-and-gods")

    // Set select menu items and their values
    multiselect.items = [
      {
        label: "Animals",
        items: [
          { label: "Anas punctata", value: "1" },
          { label: "Aonyx capensis", value: "2" },
          { label: "Bubalus arnee", value: "3" },
          { label: "Castor fiber", value: "4" },
          { label: "Colaptes campestroides", value: "5" },
          { label: "Colobus guerza", value: "6" },
          { label: "Damaliscus dorcas", value: "7" },
          { label: "Paraxerus cepapi", value: "14" },
          { label: "Pelecans onocratalus", value: "15" },
          { label: "Phoca vitulina", value: "16" },
          { label: "Phoeniconaias minor", value: "17" },
          { label: "Plegadis falcinellus", value: "18" },
          { label: "Stercorarius longicausus", value: "19" },
          { label: "Ursus americanus", value: "20" },
        ],
      },
      {
        label: "Greek gods",
        items: [
          { label: "Aphrodite", value: "a" },
          { label: "Apollo", value: "b" },
          { label: "Ares", value: "c" },
          { label: "Artemis", value: "d" },
          { label: "Athena", value: "e" },
          { label: "Chaos", value: "f" },
          { label: "Chronos", value: "g" },
          { label: "Dionysus", value: "x" },
          { label: "Zeus", value: "z" },
        ]
      }

    ]

    // Listen for change events in the select
    multiselect.addEventListener("duetChange", function (e) {
      console.log("Change event detected in multiselect:", e.detail)
    })
  }())
</script>

Properties #

Property Attribute Description Type Default
accessibleDescribedBy accessible-described-by Indicates the id of a component that describes the input. string undefined
accessibleLiveError accessible-live-error The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. "assertive" | "off" | "polite" "polite"
allControls all-controls If set, the multiselect will display buttons to select or deselect all items. This should be used when there are many items, consider when the number of items is more than 5. boolean false
caption caption Caption (underneath label) that can be set as a way of adding extra information string undefined
disabled disabled Makes the select component disabled. This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies. boolean false
error error Display the select in error state along with an error message. string ""
expand expand Expands the input to fill 100% of the container width. boolean false
identifier identifier Adds a unique identifier for the select. string createID("DuetMultiselect")
items items An array of items to choose from DuetMultiselectItemGroup[] | DuetMultiselectItem[] | string undefined
label label Label for the select. string "label"
labelColor label-color Color of the label. string undefined
labelHidden label-hidden Visually hide the label, but still show it to screen readers. boolean false
labelWeight label-weight Font weight of the label. "normal" | "semi-bold" undefined
margin margin Controls the margin of the component. "auto" | "none" "auto"
placeholder placeholder Hint text to display. string ""
theme theme Theme of the select. "" | "default" | "turva" ""
tooltip tooltip Tooltip to display next to the label of the input. string ""
tooltipDirection tooltip-direction With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. "auto" | "left" | "right" "auto"
value -- Value of multiselect DuetMultiselectItem[] []

Events #

Event Description Type
duetBlur Emitted when the select loses focus. CustomEvent<{ originalEvent?: Event; component: "duet-multiselect"; value: DuetMultiselectItem[]; }>
duetChange Callback for when the value changed. CustomEvent<{ originalEvent?: Event; component: "duet-multiselect"; value: DuetMultiselectItem[]; }>
duetFocus Emitted when the select has focus. CustomEvent<{ originalEvent?: Event; component: "duet-multiselect"; value: DuetMultiselectItem[]; }>

Methods #

selectWithValues(values: string[]) => Promise<void> #

Sets the value of the multiselect to contain the items matching the given array. Does not clear the previous value.
If multiple items share the same value that is included in the array, they all get selected.

Parameters #

Name Type Description
values string[]

Returns #

Type: Promise<void>

setFocus(options?: FocusOptions) => Promise<void> #

Sets focus on the specified duet-multiselect. Use this method instead of the global
multiselect.focus().

Parameters #

Name Type Description
options FocusOptions

Returns #

Type: Promise<void>

Slots #

Slot Description
"tooltip" Use to place a tooltip alongside the label.

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • To let user choose more than one option from an options menu.

When not to use #

  • When you have a lot of options to choose from.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.