Combobox Multi-Select

Select allows users to make a single selection or multiple selections from a list of options.

Preview

 
<dt-combobox-multi-select
  ref="comboboxMultiSelect"
  label="Label Text"
  :selected-items="selectedItems"
  @input="onInput"
  @select="onSelect"
  @remove="onRemove"
>
  <template #list>
    <ul class="d-ps-relative d-stack2 d-m4 d-px0">
      <dt-list-item
        v-for="(item, i) in items"
        :key="item.id"
        role="option"
        navigation-type="arrow-keys"
        @click="onSelect(i)"
      >
        {{ item.value }}
        <template #right>
          <span class="d-fc-secondary">{{ item.type }}</span>
        </template>
      </dt-list-item>
    </ul>
  </template>
</dt-combobox-multi-select>

Usage

The Combobox Multi-Select component combines an input element with a dropdown list, allowing users to select multiple items. Selected items appear as chips within the input field. It is commonly used for multi-select user pickers where selected items display avatars alongside names — for example, selecting team members, recipients, or participants with avatar chips.

Closing the list after selection

When not passing showList and hasSuggestionList is true, to close the list with the select event, use the closeComboboxList method:

methods: {
  onSelect (i) {
    this.$refs.comboboxMultiSelect.closeComboboxList();
  },
}

With Max Selected Validation

Adds validation for max selection. Make sure to provide the following props:

maxSelected the maximum number of selections you can make. 0 is unlimited
maxSelectedMessage should be the message that shown if max selection has been reached

 
<dt-combobox-multi-select
  ref="comboboxMultiSelect"
  label="Label Text"
  description="Select up to 2 options."
  :selected-items="selectedItems"
  :max-selected="2"
  :max-selected-message="[{ message: 'More than 2 selected', type: 'error' }]"
  @input="onInput"
  @select="onSelect"
  @remove="onRemove"
  @max-selected="onMaxSelected"
>
  <template #list>
    <ul class="d-ps-relative d-stack2 d-m4 d-px0">
      <dt-list-item
        v-for="(item, i) in items"
        :key="item.id"
        role="option"
        navigation-type="arrow-keys"
        @click="onSelect(i)"
      >
        {{ item.value }}
        <template #right>
          <span class="d-fc-secondary">{{ item.type }}</span>
        </template>
      </dt-list-item>
    </ul>
  </template>
</dt-combobox-multi-select>

Vue API

Slots

Name	Description
footer
header
list

Props

Name	Description	Default
label required	String to use for the input label. Type: string
appendTo	Sets the element to which the popover is going to append to. 'body' will append to the nearest body (supports shadow DOM). Type: HTML_ELEMENT_TYPE\|string Values: 'body''parent'HTMLElement	'body'
chipMaxWidth	Determines the maximum width of a single chip. If the text within this chip exceeds the value it will be truncated with ellipses. Possible units rem\|px\|em Type: string	''
collapseOnFocusOut	Determines whether the combobox should collapse to a single when losing focus. Type: boolean	false
description	Description for the input Type: string	''
dialogClass	Additional class for the popover dialog element. Type: string\|object\|array	''
disabled	When true, disables the underlying input. Type: boolean	false
hasSuggestionList	Displays the list when the combobox is focused, before the user has typed anything. When this is enabled the list will not close after selection. Type: boolean	true
inputClass	Additional class name for the input element. Can accept String, Object, and Array, i.e. has the same API as Vue's built-in handling of the class attribute. Type: string\|object\|array	''
inputMessages	Input validation messages Type: array	[]
inputWrapperClass	Additional class name for the input wrapper element. Can accept all of String, Object, and Array, i.e. has the same api as Vue's built-in handling of the class attribute. Type: string\|object\|array	''
labelVisible	Determines visibility of input label. Type: boolean Values: truefalse	true
listMaxHeight	Determines maximum height for the popover before overflow. Possible units rem\|px\|em Type: string	'300px'
listMaxWidth	Determines maximum width for the popover before overflow. Possible units rem\|px\|em Type: string	''
loading	Determines if the list is loading Type: boolean	false
loadingMessage	The message when the list is loading Type: string	'loading...'
maxSelected	Would be the maximum number of selections you can make. 0 is unlimited Type: number	0
maxSelectedMessage	Max select message when the max selections is exceeded with the structure: `[{"message": string, "type": VALIDATION_MESSAGE_TYPES }]` Type: array	[]
placeholder	Input placeholder Type: string	'Select one or start typing'
reservedRightSpace	Amount of reserved space (in px) on the right side of the input before the chips and the input caret jump to the next line. default is 64 Type: number	64
selectedItems	The selected items Type: array	[]
showInputMessages	Show input validation message Type: boolean	true
showList	Determines when to show the list element and also controls the aria-expanded attribute. Leaving this null will have the combobox trigger on input focus by default. If you set this value, the default trigger behavior will be disabled and you can control it as you need. Type: boolean	null
size	Size of the chip, one of `xs`, `sm`, `md` Type: string	'md'
transition	Named transition when the content display is toggled. Type: string	'fade'

Events

Name	Description
chip-keydown	Native keydown event fired when a key is pressed while a chip is focused. Type: KeyboardEvent
combobox-highlight	Event fired when combobox item is highlighted Type: Object
enter	Fired when Enter is pressed in the text input. Not fired when a chip is focused. Type: KeyboardEvent
escape	Fired when Escape is pressed in the text input. Not fired when a chip is focused. Type: KeyboardEvent
input	Native input event Type: String
keydown	Native keydown event fired when a key is pressed in the text input. For the common Escape and Enter cases, listen to `escape` / `enter` instead. Type: KeyboardEvent
max-selected	Event fired when max selected items limit is reached Type: Object
remove	Event fired when item removed Type: String
select	Event fired when item selected Type: Number

Accessibility

A screen reader visible only close button is added by default.

Keyboard Support

User can navigate between chips pressing the LEFT and RIGHT key.
Pressing LEFT key when you have chips in the input and you are at the start of the text would select the last chip.
Pressing RIGHT key when you are at the last chip would focus on the start of the input.
Pressing BACKSPACE key would focus the chip.
When a chip is focused, pressing BACKSPACE or DELETE key would remove the chip.
User can navigate the popover list pressing UP and DOWN key.

See full Keyboard Support for popover list.

Preview

Usage #

Closing the list after selection #

With Max Selected Validation #

Vue API #