1 min read



Dropdown component that mimics a Select element behavior, but with the option to customize the toggle button and each item contents.


Name Description Type Default
items List of items to display. Array
ariaLabel Description of what the dropdown is used for. string
value The selected item. union
animation Animation component to use for expanding the dropdown. This is a single element animation,
so only <transition> components are allowed.
union 'NoElement'
searchTimeoutMs Time to wait without receiving any keystroke before resetting the items search query. number 1000


Event name Properties Description


Name Description Bindings
(name - type - description)
toggle Used to render the contents of the dropdown toggle button. If not provided, it uses isOpen boolean - True if the dropdown is opened, and false if it is closed.
item string | number | Identifiable - The item data to render.
item Used to render the contents of the dropdown toggle button. If not provided, it uses isHighlighted boolean - True when the item has the focus.
isSelected boolean - True when the item is selected.
item string | number | Identifiable - Item to render


The Dropdown component is a simple yet customizable select component. The component needs to work the list of items available to select, which are passed using the items prop, and the selected item, which is passed in using the value prop.

The supported items must be an array that can contain unique strings, unique numbers, or objects with a unique id property.

The content of each item can be customized using the item slot, which apart from the data of the item, it also receives via prop if the element is selected or highlighted.

There toggle slot can be used to customize the button that opens the dropdown. If this is not provided, the item slot will be used for that.

  <BaseDropdown :items="items" v-model="value">
    <template #toggle="{ item, isOpen }">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>
    <template #item="{ item, isSelected, isHighlighted }">
      <span v-if="isHighlighted">🟢</span>
      <span v-if="isSelected"></span>
      <span>{{ item }}</span>
  import { BaseDropdown } from '@empathyco/x-components';
  export default {
    name: 'DropdownTest',
    components: {
    data() {
      return {
        items: ['a', 2, { id: '3' }],
        value: ['a']