InputMenu

An input field with live autocomplete suggestions.

Combobox

Nuxt UI

Git

Usage

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

TIP

Use this over an Input to take advantage of Reka UI's Combobox component that offers autocomplete capabilities.

INFO

This component is similar to the SelectMenu but it's using an Input instead of a Select.

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>
  <B24InputMenu
    v-model="value"
    :items="items"
  />
</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
• color?: string
• 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',
    color: 'danger'
  }
])
const value = ref(items.value[1])
</script>

<template>
  <B24InputMenu
    v-model="value"
    :items="items"
  />
</template>

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()
</script>

<template>
  <B24InputMenu
    v-model="value"
    :items="items"
  />
</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>
  <B24InputMenu
    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 displayed as badges.

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>
  <B24InputMenu
    v-model="value"
    multiple
    :items="items"
    placeholder="Insert value"
  />
</template>

Delete Icon

With multiple, use the delete-icon prop to customize the delete icon @bitrix24/b24icons in the badges. Defaults to Cross30Icon.

Details

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

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>
  <B24InputMenu
    v-model="value"
    multiple
    :items="items"
    placeholder="Insert value"
    :delete-icon="CrossCircle70Icon"
  />
</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>
  <B24InputMenu
    v-model="value"
    :items="items"
    :placeholder="placeholder"
    class="w-full"
  />
</template>

Content

Use the content prop to control how the InputMenu 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()

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

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

Arrow

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

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()
</script>

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

Color

Use the color prop to change the ring color when the InputMenu 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(items.value[1])
</script>

<template>
  <B24InputMenu
    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(items.value[1])
</script>

<template>
  <B24InputMenu
    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 InputMenu.

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(items.value[1])
</script>

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

Icon

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

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(items.value[1])
</script>

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

Trailing Icon

Use the trailing-icon prop to customize the trailing icon @bitrix24/b24icons. Defaults to 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(items.value[1])
</script>

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

Selected Icon

Use the selected-icon prop to customize the icon @bitrix24/b24icons when an item is selected. Defaults to 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(items.value[1])
</script>

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

Avatar

Use the avatar prop to show an Avatar inside the InputMenu.

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(items.value[1])
</script>

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

Loading

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

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(items.value[1])
</script>

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

Disabled

Use the disabled prop to disable the InputMenu.

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(items.value[1])
</script>

<template>
  <B24InputMenu
    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',
    color: 'danger'
  }
])
const value = ref()
</script>

<template>
  <B24InputMenu
    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,
    color: 'danger'
  }
])
const value = ref()
</script>

<template>
  <B24InputMenu
    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()
</script>

<template>
  <B24InputMenu
    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()
</script>

<template>
  <B24InputMenu
    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>
  </B24InputMenu>
</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 InputMenu 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>
  <B24InputMenu
    v-model="value"
    v-model:open="open"
    :items="items"
    class="w-full"
  />
</template>

Control open state on focus

You can also use the @focus directive to control the open state.

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()

const open = ref(false)
</script>

<template>
  <B24InputMenu
    v-model="value"
    v-model:open="open"
    :items="items"
    class="w-full"
    @focus="open = true"
  />
</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>
  <B24InputMenu
    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 InputMenu.

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>
  <B24InputMenu
    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.

TIP

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>
  <B24InputMenu
    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 InputMenu.

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>
  <B24InputMenu
    :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>
  </B24InputMenu>
</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>
  <B24InputMenu
    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>
  </B24InputMenu>
</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>
  <B24InputMenu
    :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>
  </B24InputMenu>
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
id		string
type	"text"	"number" | "reset" | "submit" | "image" | "color" | "button" | "date" | "time" | string & {} | "text" | "search" | "range" | "month" | "checkbox" | "file" | "datetime-local" | "email" | "hidden" | "password" | "radio" | "tel" | "url" | "week"
placeholder		string The placeholder text when the input is empty
color	'primary'	"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
size	'md'	"lg" | "md" | "xs" | "sm"
noPadding	false	boolean Removes padding from input
noBorder	false	boolean Removes all borders (rings)
underline	false	boolean Removes all borders (rings) except the bottom one
rounded	false	boolean Rounds the corners of the button
required	false	boolean
autofocus	false	boolean
autofocusDelay	0	number
trailingIcon	icons.chevronDown	(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	(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.
deleteIcon	icons.close	(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 delete a tag. Works only when `multiple` is `true`.
content	{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }	Omit<ComboboxContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<DismissableLayerEmits>> 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 | number When `items` is an array of objects, select the field to use as the value instead of the object itself.
labelKey	"label" as never	undefined When `items` is an array of objects, select the field to use as the label.
items		InputMenuItem[] | InputMenuItem[][]
defaultValue		any The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu
modelValue		any The controlled value of the InputMenu. Can be binded-with with `v-model`
multiple	false	boolean Whether multiple options can be selected or not
tag		string
tagColor	'primary'	"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
highlight	false	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		{ root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; ... 24 more ...; tagsInput?: ClassNameValue; }
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
resetSearchTermOnSelect	true	boolean Whether to reset the searchTerm when the Combobox value is selected
highlightOnHover		boolean When `true`, hover over item will trigger highlight
icon	icons.loading	(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.
searchTerm	""	string

Slots

Slot	Type
leading	{ modelValue?: any; open: boolean; b24ui: { root: (props?: Record<string, any>) => string; base: (props?: Record<string, any> | undefined) => string; leading: (props?: Record<...> | undefined) => string; ... 26 more ...; tagsInput: (props?: Record<...> | undefined) => string; }; }
trailing	{ modelValue?: any; open: boolean; b24ui: { root: (props?: Record<string, any>) => string; base: (props?: Record<string, any> | undefined) => string; leading: (props?: Record<...> | undefined) => string; ... 26 more ...; tagsInput: (props?: Record<...> | undefined) => string; }; }
empty	{ searchTerm?: string; }
item	{ item: InputMenuItem; index: number; }
item-leading	{ item: InputMenuItem; index: number; }
item-label	{ item: InputMenuItem; index: number; }
item-trailing	{ item: InputMenuItem; index: number; }
tags-item-text	{ item: InputMenuItem; index: number; }
tags-item-delete	{ item: InputMenuItem; index: number; }
create-item-label	{ item: string; }

Emits

Event	Type