InputMenu

An input field with live autocomplete suggestions.

Combobox

Nuxt UI

Git

We are still updating this page

Some data may be missing here — we will complete it shortly.

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
• 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>
  <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('CRM Payment')
</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.

__component-code

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.

__component-code

Placeholder

Use the placeholder prop to set a placeholder text.

__component-code

Content

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

__component-code

Arrow

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

__component-code

Color

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

__component-code

INFO

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

Size

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

__component-code

Icon

Use the icon prop to show an defineShortcuts inside the InputMenu.

__component-code

Trailing Icon

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

__component-code

Selected Icon

Use the selected-icon prop to customize the icon @bitrix24/b24icons when an item is selected. Defaults to CheckIcon.

__component-code

Avatar

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

__component-code

Loading

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

__component-code

Disabled

Use the disabled prop to disable the InputMenu.

__component-code

Examples

With items type

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

__component-code

With icons in items

You can use the icon property to display an defineShortcuts inside the items.

__component-code

TIP

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

With avatar in items

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

__component-code

TIP

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

With chip in items

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

__component-code

INFO

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

Control open state

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

__component-code

INFO

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

Control open state on focus

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

__component-code

Control search term

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

__component-code

With rotating icon

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

__component-code

With create item

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

__component-code

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.

With fetched items

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

__component-code

With ignore filter

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

__component-code

INFO

This example uses refDebounced to debounce the API calls.

With filter fields

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

__component-code

As a CountryPicker

This example demonstrates using the InputMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.

__component-example

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
searchTerm		string
id		string
type	"text"	"number" | "reset" | "submit" | "image" | "color" | "text" | "button" | "date" | "time" | string & {} | "search" | "checkbox" | "file" | "datetime-local" | "email" | "hidden" | "month" | "password" | "radio" | "range" | "tel" | "url" | "week"
placeholder		string The placeholder text when the input is empty.
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.
required		boolean
autofocus		boolean
autofocusDelay	0	number
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.
deleteIcon	icons.close = `Cross30Icon`	(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"> 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 | InputMenuItem)[] | (boolean | AcceptableValue | 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		boolean Whether multiple options can be selected or not.
tag		string
tagColor		"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
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; arrow: string; content: string; ... 18 more ...; tagsInput: 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 | InputMenuItem | (boolean | AcceptableValue | InputMenuItem)[]; open: boolean; b24ui: any; }
trailing	{ modelValue?: boolean | AcceptableValue | InputMenuItem | (boolean | AcceptableValue | InputMenuItem)[]; open: boolean; b24ui: any; }
empty	{ searchTerm?: string; }
item	{ item: boolean | AcceptableValue | InputMenuItem; index: number; }
item-leading	{ item: boolean | AcceptableValue | InputMenuItem; index: number; }
item-label	{ item: boolean | AcceptableValue | InputMenuItem; index: number; }
item-trailing	{ item: boolean | AcceptableValue | InputMenuItem; index: number; }
tags-item-text	{ item: boolean | AcceptableValue | InputMenuItem; index: number; }
tags-item-delete	{ item: boolean | AcceptableValue | InputMenuItem; index: number; }
create-item-label	{ item: string; }

Emits

Event	Type