Skip to content
On this page
You're viewing the docs for the main branch of Codex, which may contain features that have not been released yet. Codex users should visit the official docs.

Combobox

A text input with an expandable menu of predefined items.

TextInput props apply

This component contains a TextInput component. You can bind TextInput props to this component and they will be passed to the TextInput within.

Attributes passed to input

This component will pass any HTML attributes applied to it, except for CSS class, to the <input> element within the component.

Demos

Basic Usage

The Combobox component combines a menu of selectable items with a text box that can accept arbitrary input from the user. The component should receive a v-model:selected binding from its parent as well as an array of menu items (which can be empty).

Selected value:

NameValue
View
Reading direction

Clearable, with start icon

Valid TextInput props like startIcon, endIcon, and clearable will be passed on to the embedded TextInput.

Selected value:

With menu item icons and descriptions

Items are displayed via the MenuItem componentā€”see the MenuItem docs for more options. In this example, a menuConfig object is passed to the Combobox to bold the label text and hide the text overflow of the descriptions.

With custom menu item display

Like other menu-style components (Select, Lookup, etc.), a custom template can be provided via the #menu-item slot. In this example, only the menu item's icon is displayed in the menu.

With "no results" content

A non-interactive "no results" message can be displayed via the no-results slot. If populated, this slot will automatically display when there are zero menu items.

With configurable scroll

By default, all menu items are displayed when the menu is expanded. To limit the height of the menu and enable scrolling, use the visibleItemLimit property of the menuConfig prop.

Disabled

Usage

Props

Prop nameDescriptionTypeValuesDefault
menuItems(required)Menu items. See the MenuItemData type.MenuItemData[]-
selected(required)Value of the current selection.

Must be bound with v-model:selected.
string|number-
disabledWhether the dropdown is disabled.boolean-false
menuConfigConfiguration for various menu features. All properties default to false.

See the MenuConfig type.
MenuConfig-() => { return {} as MenuConfig; }
statusstatus property of the TextInput componentValidationStatusType'default', 'error''default'

Events

Event namePropertiesDescription
load-moreWhen the user scrolls towards the bottom of the menu.

If it is possible to add or load more menu items, then now would be a good moment so that the user can experience infinite scrolling.
update:selectedselected string|number - The new selected valueWhen the selected value changes.

Slots

NameDescriptionBindings
menu-itemDisplay of an individual item in the menumenu-item MenuItemData - The current menu item
no-resultsMessage to show if there are no menu items to display.