SelectMenu

A refined and searchable selection component.

Combobox

Nuxt UI

Git

Usage

Use the v-model directive to control the value of the SelectMenu or the default-value prop to set the initial value when you do not need to control its state.

TIP

Use this over a Select to take advantage of Reka UI's Combobox component that offers search capabilities and multiple selection.

INFO

This component is similar to the InputMenu but it's using a Select instead of an Input with the search inside the menu.

Items

Use the items prop as an array of strings, numbers or booleans:

<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['CRM settings', 'My company details', 'Access permissions', 'CRM Payment', 'CRM.Delivery', 'Scripts', 'Create script', 'Install from Bitrix24.Market'])
const value = ref('CRM Payment')
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    class="w-full"
  />
</template>

You can also pass an array of objects with the following properties:

• label?: string
• type?: "label" | "separator" | "item"
• icon?: FunctionalComponent<HTMLAttributes & VNodeProps>
• avatar?: AvatarProps
• chip?: ChipProps
• disabled?: boolean
• onSelect?(e: Event): void

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    class="w-full"
  />
</template>

DANGER

Unlike the Select component, the SelectMenu expects the whole object to be passed to the v-model directive or the default-value prop by default.

You can also pass an array of arrays to the items prop to display separated groups of items.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  ['CRM settings', 'My company details', 'Access permissions', 'CRM Payment', 'CRM.Delivery'],
  ['Scripts', 'Create script', 'Install from Bitrix24.Market']
])
const value = ref('CRM Payment')
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    class="w-full"
  />
</template>

Value Key

You can choose to bind a single property of the object rather than the whole object by using the value-key prop. Defaults to undefined.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  {
    label: 'CRM settings',
    id: 'settings'
  },
  {
    label: 'My company details',
    id: 'my_company_details'
  },
  {
    label: 'Access permissions',
    id: 'access_permissions'
  }
])
const value = ref('my_company_details')
</script>

<template>
  <B24SelectMenu
    v-model="value"
    value-key="id"
    :items="items"
    class="w-full"
  />
</template>

Multiple

Use the multiple prop to allow multiple selections, the selected items will be separated by a comma in the trigger.

DANGER

Ensure to pass an array to the default-value prop or the v-model directive.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['CRM settings', 'My company details', 'Access permissions', 'CRM Payment', 'CRM.Delivery', 'Scripts', 'Create script', 'Install from Bitrix24.Market'])
const value = ref(['CRM Payment', 'CRM Payment'])
</script>

<template>
  <B24SelectMenu
    v-model="value"
    multiple
    :items="items"
    class="w-full"
  />
</template>

Placeholder

Use the placeholder prop to set a placeholder text.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  placeholder?: string
}

withDefaults(defineProps<ExampleProps>(), {
  placeholder: 'You need to choose'
})

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    :placeholder="placeholder"
    class="w-full"
  />
</template>

Search Input

Use the search-input prop to customize or hide the search input (with false value).

You can pass any property from the Input component to customize it.

TIP

You can set the search-input prop to false to hide the search input.

Details

<script setup lang="ts">
import { ref } from 'vue'
import Search2Icon from '@bitrix24/b24icons-vue/main/Search2Icon'

export interface ExampleProps {
  searchInputPlaceholder?: string
}

withDefaults(defineProps<ExampleProps>(), {
  searchInputPlaceholder: 'Filter...'
})

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    :search-input="{
      placeholder: searchInputPlaceholder,
      icon: Search2Icon
    }"
    class="w-full"
  />
  <B24Separator class="my-3 w-full" label="hide the search input" type="dotted" />
  <B24SelectMenu
    v-model="value"
    :items="items"
    :search-input="false"
    class="w-full"
  />
</template>

Content

Use the content prop to control how the SelectMenu content is rendered, like its align or side for example.

Details

<script setup lang="ts">
import { ref, computed } from 'vue'

export interface ExampleProps {
  contentAlign?: 'start' | 'center' | 'end'
  contentSide?: 'top' | 'right' | 'bottom' | 'left'
  contentSideOffset?: number
}

const props = withDefaults(defineProps<ExampleProps>(), {
  contentAlign: 'start',
  contentSide: 'left',
  contentSideOffset: 8
})

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})

const content = computed(() => {
  return {
    align: props.contentAlign,
    side: props.contentSide,
    sideOffset: props.contentSideOffset
  }
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    :content="content"
    class="w-full"
  />
</template>

Arrow

Use the arrow prop to display an arrow on the SelectMenu.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    arrow
    class="w-full"
  />
</template>

Color

Use the color prop to change the ring color when the SelectMenu is focused.

INFO

The highlight prop is used here to show the focus state. It's used internally when a validation error occurs.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  color: any
  isHighlight?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'default',
  isHighlight: true
})

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :color="color"
    :highlight="isHighlight"
    :items="items"
    class="w-full"
  />
</template>

Tag

Use the tag property to display a small legend on top of the SelectMenu.

Use the tagColor property to set the color for tag.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  tagColor: any
  tag?: string
}

withDefaults(defineProps<ExampleProps>(), {
  tagColor: 'default',
  tag: 'info'
})

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :tag-color="tagColor"
    :tag="tag"
    :items="items"
    class="w-full"
  />
</template>

Size

Use the size prop to change the size of the SelectMenu.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  size?: any
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md'
})

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :size="size"
    :items="items"
    class="w-full"
  />
</template>

Icon

Use the icon prop to show an @bitrix24/b24icons inside the SelectMenu.

Details

<script setup lang="ts">
import { ref } from 'vue'
import CrmSearchIcon from '@bitrix24/b24icons-vue/crm/CrmSearchIcon'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    :icon="CrmSearchIcon"
    class="w-full"
  />
</template>

Trailing Icon

Use the trailing-icon prop to customize the trailing @bitrix24/b24icons. Defaults to Actions::ChevronDownIcon.

Details

<script setup lang="ts">
import { ref } from 'vue'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    :trailing-icon="Expand1Icon"
    class="w-full"
  />
</template>

Selected Icon

Use the selected-icon prop to customize the icon when an item is selected. Defaults to Main::CheckIcon.

Details

<script setup lang="ts">
import { ref } from 'vue'
import CheckInBoxIcon from '@bitrix24/b24icons-vue/crm/CheckInBoxIcon'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    :selected-icon="CheckInBoxIcon"
    class="w-full"
  />
</template>

Avatar

Use the avatar prop to display an Avatar inside the SelectMenu.

Details

<script setup lang="ts">
import { ref } from 'vue'
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    :avatar="{ src: '/b24ui/avatar/employee.png' }"
    class="w-full"
  />
  <B24SelectMenu
    v-model="value"
    :items="items"
    :avatar="{ icon: Bitrix24Icon }"
    class="w-full"
  />
</template>

Loading

Use the loading prop to show a loading icon on the SelectMenu.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  isLoading?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isLoading: true
})

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    :loading="isLoading"
    class="w-full"
  />
</template>

Disabled

Use the disabled prop to disable the SelectMenu.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  isDisabled?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isDisabled: true
})

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    :disabled="isDisabled"
    class="w-full"
  />
</template>

Examples

With items type

You can use the type property with separator to display a separator between items or label to display a label.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  {
    type: 'label',
    label: 'Main'
  },
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    type: 'separator'
  },
  {
    type: 'label',
    label: 'Access'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref({
  label: 'My company details',
  value: 'my_company_details'
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    class="w-full"
  />
</template>

With icons in items

You can use the icon property to display an @bitrix24/b24icons inside the items.

TIP

You can also use the #leading slot to display the selected icon.

Details

<script setup lang="ts">
import { ref } from 'vue'
import SettingsIcon from '@bitrix24/b24icons-vue/main/SettingsIcon'
import MyPlanIcon from '@bitrix24/b24icons-vue/main/MyPlanIcon'
import Shield2DefendedIcon from '@bitrix24/b24icons-vue/main/Shield2DefendedIcon'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings',
    icon: SettingsIcon
  },
  {
    label: 'My company details',
    value: 'my_company_details',
    icon: MyPlanIcon
  },
  {
    label: 'Access permissions',
    value: 'access_permissions',
    icon: Shield2DefendedIcon
  }
])
const value = ref(items.value[1])
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    class="w-full"
    :icon="value?.icon"
  />
</template>

With avatar in items

You can use the avatar property to display an Avatar inside the items.

TIP

You can also use the #leading slot to display the selected avatar.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  {
    label: 'Assistant',
    value: 'assistant',
    avatar: {
      src: '/b24ui/avatar/assistant.png',
      alt: 'assistant'
    }
  },
  {
    label: 'Employee',
    value: 'employee',
    avatar: {
      src: '/b24ui/avatar/employee.png',
      alt: 'employee'
    }
  }
])
const value = ref(items.value[1])
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    :avatar="value?.avatar"
    class="w-full"
  />
</template>

With chip in items

You can use the chip property to display a Chip inside the items.

INFO

In this example, the #leading slot is used to display the selected chip.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  {
    label: 'default',
    value: 'default',
    chip: {
      color: 'default' as const
    }
  },
  {
    label: 'danger',
    value: 'danger',
    chip: {
      color: 'danger' as const
    }
  }
])
const value = ref(items.value[1])
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    class="w-full"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Chip
        v-if="modelValue"
        v-bind="modelValue.chip"
        inset
        standalone
        :size="b24ui.itemLeadingChipSize()"
        :class="b24ui.itemLeadingChip()"
      />
    </template>
  </B24SelectMenu>
</template>

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

INFO

In this example, leveraging defineShortcuts, you can toggle the SelectMenu by pressing O.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref(items.value[1])

const open = ref(false)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <B24SelectMenu
    v-model="value"
    v-model:open="open"
    :items="items"
    class="w-full"
  />
</template>

Control search term

Use the v-model:search-term directive to control the search term.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref(items.value[1])

const searchTerm = ref('Ac')
</script>

<template>
  <B24SelectMenu
    v-model="value"
    v-model:search-term="searchTerm"
    :items="items"
    class="w-full"
  />
</template>

With rotating icon

Here is an example with a rotating icon that indicates the open state of the SelectMenu.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings'
  },
  {
    label: 'My company details',
    value: 'my_company_details'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions'
  }
])
const value = ref(items.value[1])
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    :b24ui="{
      trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
    }"
    class="w-full"
  />
</template>

With create item

Use the create-item prop to enable users to add custom values that aren't in the predefined options.

INFO

The create option shows when no match is found by default. Set it to always to show it even when similar values exist.

INFO

Use the @create event to handle the creation of the item. You will receive the event and the item as arguments.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  'CRM settings',
  'My company details',
  'Access permissions'
])
const value = ref(items.value[1])

function onCreate(item: string) {
  items.value.push(item)

  value.value = item
}
</script>

<template>
  <B24SelectMenu
    v-model="value"
    create-item
    :items="items"
    class="w-full"
    @create="onCreate"
  />
</template>

With fetched items

You can fetch items from an API and use them in the SelectMenu.

Details

<script setup lang="ts">
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const { data: users, status: status } = await globalThis.useFetch('https://jsonplaceholder.typicode.com/users', {
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    })) || []
  },
  lazy: true
})
</script>

<template>
  <B24SelectMenu
    :items="users || []"
    :loading="status === 'pending'"
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    class="w-full"
    placeholder="Select user"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Avatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="b24ui.leadingAvatarSize()"
        :class="b24ui.leadingAvatar()"
      />
    </template>
  </B24SelectMenu>
</template>

With ignore filter

Set the ignore-filter prop to true to disable the internal search and use your own search logic.

INFO

This example uses refDebounced to debounce the API calls.

Details

<script setup lang="ts">
import { ref } from 'vue'
import { refDebounced } from '@vueuse/core'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const searchTerm = ref('')
const searchTermDebounced = refDebounced(searchTerm, 200)

const { data: users, status: status } = await globalThis.useFetch('https://jsonplaceholder.typicode.com/users', {
  params: { q: searchTermDebounced },
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    })) || []
  },
  lazy: true
})
</script>

<template>
  <B24SelectMenu
    v-model:search-term="searchTerm"
    :items="users || []"
    :loading="status === 'pending'"
    ignore-filter
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    class="w-full"
    placeholder="Select user"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Avatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="b24ui.leadingAvatarSize()"
        :class="b24ui.leadingAvatar()"
      />
    </template>
  </B24SelectMenu>
</template>

With filter fields

Use the filter-fields prop with an array of fields to filter on. Defaults to [labelKey].

Details

<script setup lang="ts">
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const { data: users, status: status } = await globalThis.useFetch('https://jsonplaceholder.typicode.com/users', {
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      email: user.email,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    })) || []
  },
  lazy: true
})
</script>

<template>
  <B24SelectMenu
    :items="users || []"
    :loading="status === 'pending'"
    :filter-fields="['label', 'email']"
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    class="w-full"
    placeholder="Select user"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Avatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="b24ui.leadingAvatarSize()"
        :class="b24ui.leadingAvatar()"
      />
    </template>
    <template #item-label="{ item }">
      {{ item.label }}

      <span class="text-base-500">
        {{ item.email }}
      </span>
    </template>
  </B24SelectMenu>
</template>

API

Props

Prop	Default	Type
searchTerm		string
id		string
placeholder		string The placeholder text when the select is empty.
searchInput	true	boolean | InputProps Whether to display the search input or not. Can be an object to pass additional props to the input. `{ placeholder: 'Search...', type: 'search' }`{lang="ts-type"}
color		"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
size		"lg" | "md" | "xs" | "sm"
noPadding		boolean Removes padding from input.
noBorder		boolean removes all borders (rings).
underline		boolean removes all borders (rings) except the bottom one.
rounded		boolean Rounds the corners of the button.
tag		string
tagColor		"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
required		boolean
trailingIcon	icons.chevronDown = `ChevronDownIcon`	(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any The icon displayed to open the menu.
selectedIcon	icons.check = `CheckIcon`	(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any The icon displayed when an item is selected.
content	{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }	Omit<ComboboxContentProps, "as" | "asChild" | "forceMount"> The content of the menu.
arrow	false	boolean | Omit<ComboboxArrowProps, "as" | "asChild"> Display an arrow alongside the menu.
portal	true	boolean Render the menu in a portal.
valueKey	undefined	string When `items` is an array of objects, select the field to use as the value instead of the object itself.
labelKey	"label" as never	string When `items` is an array of objects, select the field to use as the label.
items		(boolean | AcceptableValue | SelectMenuItem)[] | (boolean | AcceptableValue | SelectMenuItem)[][]
defaultValue		any The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu.
modelValue		any The controlled value of the SelectMenu. Can be binded-with with `v-model`.
multiple		boolean Whether multiple options can be selected or not.
highlight		boolean Highlight the ring color like a focus state.
createItem	false	boolean | "always" | { position?: "bottom" | "top"; when?: "always" | "empty" | undefined; } | undefined Determines if custom user input that does not exist in options can be added.
filterFields	[labelKey]	string[] Fields to filter items by.
ignoreFilter	false	boolean When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
b24ui		PartialString<{ root: string; base: string; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; tag: string; value: string; placeholder: string; ... 19 more ...; focusScope: string; }>
disabled		boolean When `true`, prevents the user from interacting with listbox
name		string The name of the field. Submitted with its owning form as part of a name/value pair.
defaultOpen		boolean The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state.
open		boolean The controlled open state of the Combobox. Can be binded with with `v-model:open`.
resetSearchTermOnBlur	true	boolean Whether to reset the searchTerm when the Combobox input blurred
highlightOnHover		boolean When `true`, hover over item will trigger highlight
icon		(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any Display an icon on the left side.
avatar		AvatarProps Display an avatar on the left side.
loading		boolean When `true`, the loading icon will be displayed.
trailing		boolean When `true`, the icon will be displayed on the right side.

Slots

Slot	Type
leading	{ modelValue?: boolean | AcceptableValue | SelectMenuItem | (boolean | AcceptableValue | SelectMenuItem)[]; open: boolean; b24ui: any; }
default	{ modelValue?: boolean | AcceptableValue | SelectMenuItem | (boolean | AcceptableValue | SelectMenuItem)[]; open: boolean; }
trailing	{ modelValue?: boolean | AcceptableValue | SelectMenuItem | (boolean | AcceptableValue | SelectMenuItem)[]; open: boolean; b24ui: any; }
empty	{ searchTerm?: string; }
item	{ item: boolean | AcceptableValue | SelectMenuItem; index: number; }
item-leading	{ item: boolean | AcceptableValue | SelectMenuItem; index: number; }
item-label	{ item: boolean | AcceptableValue | SelectMenuItem; index: number; }
item-trailing	{ item: boolean | AcceptableValue | SelectMenuItem; index: number; }
create-item-label	{ item: string; }

Emits

Event	Type