Combobox

Use the KCombobox component to allow users to select one or multiple options from a standardized list, with support for searching and remote data providers.

Single Select

Example Label

Disabled

Multi Select with Search

Value Field (Primitive ID Binding)

Selected ID: Cherry

Virtual Scrolling & Virtual Pagination

Demonstrates smooth virtual pagination over a 500-item dataset with a page size of 20. Scrolling down automatically fetches the next page and dynamically virtualizes DOM nodes.

Virtual Paginated Options (500 items)

Validation States

State

message

Configure the KCombobox component using these attributes.

Name	Type	Default	Description
label	string	''	There will be a label.
dataProvider	ADataProvider	-	Required. The data provider instance to fetch options
labelField	string	-	Required. The field name to use for displaying the option label
modelValue (v-model)	any	null	Binding value for the selected item(s). Can be a primitive if valueField is set.
valueField	string	null	Optional. If set, v-model will bind to this field instead of the whole object.
closeOnSelect	boolean	false	Closes the dropdown when an item is selected
disabled	boolean	false	Disables the combobox
multiSelect	boolean	false	Enables multiple selection
maxSelectedDisplay	number \| string \| boolean	false	Maximum number of selected items to display as badges before summarizing
placeholder	string	'select'	Placeholder text when no item is selected
searchbox	boolean	false	Enables a search input to filter options
searchPlaceholder	string	'Search...'	Placeholder for the search input
searchtext (v-model:searchtext)	string	''	Live search input text with two-way binding
fullWidth	boolean	true	Whether the dropdown should match at least the anchor width
teleportTo	string	undefined	Target element for dropdown teleportation
isOptionsOpen (v-model:isOptionsOpen)	boolean	undefined	Controls dropdown visibility externally
validation	'success' \| 'warning' \| 'error' \| null	null	Semantic validation state.
validationText	string	''	message to display below the combobox.
virtualScroll	boolean	true	Enables virtual DOM windowing and virtual pagination on scroll
itemHeight	number	40	Fixed height in pixels for each option item during virtual scrolling
buffer	number	5	Number of extra items rendered outside visible viewport for smooth scrolling
visibleFields	Array<String> \| null	null	Fields to display in the dropdown list

Listen to these events emitted by the KCombobox component.

Name	Payload	Description
update:modelValue	ComboboxItem \| ComboboxItem[] \| null	Fired when an item is selected or deselected
update:isOptionsOpen	boolean	Fired when the options dropdown opens or closes
update:searchtext	string	Fired when the search input text changes (for v-model:searchtext)
scroll-state-change	{ loadedCount: number; hasMore: boolean; lastAppendedPage: number; totalCount: number }	Fired when virtual scroll pagination state updates