ListBoxComponent

Updated on Nov 3, 2025

Represents the Kendo UI ListBox component for Angular. Provides a list of items from which you can select and transfer data between connected ListBoxes (see overview).

typescript

@Component({
  selector: 'my-app',
  template: `
    <kendo-listbox
      [data]="items"
      textField="name"
      [toolbar]="true">
    </kendo-listbox>
  `
})
export class AppComponent {
  items = [
    { name: 'Item 1' },
    { name: 'Item 2' }
  ];
}

Selector

kendo-listbox

Inputs

Name	Type	Default	Description
data	any[]	[]	Specifies the data that the ListBox displays.
itemDisabled	(item: any) => boolean		Specifies a function that determines if a specific item is disabled.
listboxLabel	string	'Listbox'	Specifies the value of the aria-label attribute of the Listbox element.
listboxToolbarLabel	string	'Toolbar'	Specifies the value of the aria-label attribute of the Listbox toolbar element.
selectable	SelectionMode	'single'	Sets the selection mode of the ListBox.
size	ListBoxSize		Specifies the size of the component.
textField	string		Specifies the field of the data item that provides the text content of the nodes.
toolbar	boolean | ListBoxToolbarConfig	false	Configures the toolbar of the ListBox. Specifies whether to display a toolbar and which tools and position to use.

Fields

Name	Type	Default	Description
selectedIndices	number[]		Gets the indexes of the currently selected items in the ListBox.

Events

Name	Type	Description
action	EventEmitter<ActionName>	Fires when you click a ListBox item.
selectionChange	EventEmitter<ListBoxSelectionEvent>	Fires when you select a different ListBox item. Also fires when you move a node, because moving changes its index.

Methods

clearSelection
Clears the ListBox selection programmatically.

select
Selects multiple ListBox nodes programmatically.
Parameters indices number[]