AI Components & Features
Sample Applications
Knowledge Base
FAQ
API Reference
Components / Dropdowns / API / MultiSelectComponent
New to Kendo UI for Angular? Start a free 30-day trial

MultiSelectComponent

Component

Represents the Kendo UI MultiSelect component for Angular.

Use the MultiSelectComponent to show a dropdown list where users can select multiple items. See example.

Definition

Package:@progress/kendo-angular-dropdowns

Selector:kendo-multiselect

Export Name:Accessible in templates as #kendoMultiSelectInstance="kendoMultiSelect"

Syntax:

TS
@Component({
  selector: 'my-app',
  template: `
    <kendo-multiselect
      [data]="listItems"
      textField="name"
      valueField="id"
      placeholder="Select items...">
    </kendo-multiselect>
  `
})
export class AppComponent {
  public listItems = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" }
  ];
}

Inputs

adaptiveMode

Controls the adaptive mode behavior of the component. Set to auto to enable adaptive rendering on small screens.

Default:

'none'

adaptiveSubtitle

string

Sets the subtitle text for the ActionSheet in adaptive mode. No subtitle appears by default.

adaptiveTitle

string

Sets the title text for the ActionSheet in adaptive mode. Uses the component's label text by default.

Default:

''

allowCustom

boolean

Allows users to add custom values not present in the data source. Set to true to enable custom value input. This feature is not available in adaptive mode.

Default:

false

autoClose

boolean

Controls whether the options list closes after item selection finishes (see example). Set to false to keep the list open while the component has focus.

Default:

true

checkboxes

Controls whether checkboxes appear before each item in the popup list. Pass true to enable checkboxes or an object to configure checkbox settings.

Default:

false

clearButton

boolean

Controls whether a clear button appears when items are selected. Set to true to show the button that clears all selections.

Default:

true

data

any[]

Sets the data source for the MultiSelect. Provide the data as an array of items.

disabled

boolean

Controls the disabled state of the component. When true, sets the component to disabled. To learn how to disable the component in reactive forms, refer to the article on Forms Support.

Default:

false

fillMode

Sets the fill mode of the component. The default value is set by the Kendo theme.

filterable

boolean

Enables the filtering functionality of the MultiSelect. Set to true to allow users to filter the data by typing.

Default:

false

inputAttributes

{ [key: string]: string }

Sets HTML attributes for the inner input element. You cannot change attributes essential for component functionality.

itemDisabled

Determines wether the item will be disabled. The function is executed for each data item. The function receives the item as an argument and should return true if the item is disabled.

listHeight

number

Sets the height of the options list in the popup. This affects only the list height, not the entire popup container.

Default:

200

loading

boolean

Controls the loading state of the MultiSelect. Set to true to display the loading indicator.

placeholder

string

Sets the placeholder text for the MultiSelect input. When the values are selected, it disappears.

popupSettings

Configures the popup appearance and behavior. Set properties like animate, width, height, popupClass, and appendTo.

readonly

boolean

Controls the read-only state of the component. When true, the component does not allow user input or selection changes.

Default:

false

rounded

Sets the border radius of the component. The default value is set by the Kendo theme.

showStickyHeader

boolean

Shows or hides the current group sticky header when using grouped data. By default the sticky header is displayed (see example).

Default:

true

size

Sets the size of the component. The default value is set by the Kendo theme.

tabindex

number

Sets the tabindex attribute of the component.

Default:

0

tagMapper

Sets a function that transforms selected data items into display tags. Use this to customize how selected items appear as tags.

Parameters:tagsanyReturns:

any

Default:

(tags) => tags || []

textField

string

Sets the field name that contains the item text in the data objects. Skip this property when your data contains only primitive values. Supports nested property paths like category.name.

value

any[]

Sets the selected values of the MultiSelect. Accepts primitive values (strings, numbers) or complex objects. Use the valuePrimitive property to define the value type.

The component ignores selected values that don't exist in the data source.

valueField

string

Sets the field name that contains the item value in the data objects. Skip this property when your data contains only primitive values. Supports nested property paths like category.id.

valueNormalizer

Sets a function that normalizes custom user input into data items. Use this when your data items differ from simple strings.

Parameters:textObservable​<string>Returns:

Observable​<any>

valuePrimitive

boolean

Controls the type of selected values. Set to true for primitive values or false for object references. When undefined, the component determines the type based on valueField.

virtual

Enables virtualization to improve performance with large datasets. Pass true for default settings or an object to configure virtualization.

Fields

isOpen

boolean

Returns the current open state. Returns true if the popup or actionSheet is open.

Events

blur

EventEmitter​<any>

Fires when the MultiSelect component loses focus.

close

EventEmitter​<PreventableEvent>

Fires before the popup closes. You can prevent the popup from closing by calling preventDefault() on the event.

closed

EventEmitter​<any>

Fires after the popup closes completely.

filterChange

EventEmitter​<string>

Fires when the user types in the input field. Use this event to filter the data source based on user input.

focus

EventEmitter​<any>

Fires when the user focuses the MultiSelect component.

inputBlur

EventEmitter​<any>

Fires when the input element inside the MultiSelect loses focus.

inputFocus

EventEmitter​<any>

Fires when the user focuses the input element inside the MultiSelect.

open

EventEmitter​<PreventableEvent>

Fires before the popup opens. You can prevent the popup from opening by calling preventDefault() on the event.

opened

EventEmitter​<any>

Fires after the popup opens completely.

removeTag

Fires before a tag gets removed from the selection. You can prevent tag removal by calling preventDefault() on the event.

valueChange

EventEmitter​<any[]>

Fires when the value changes through user interaction or the Clear button. This event does not fire when you change the value programmatically.

Methods

blur

Removes focus from the MultiSelect input element.

focus

Focuses the MultiSelect input element.

focusItemAt

Focuses a specific item in the MultiSelect based on the provided index. Sets the index to -1 to focus the custom item if available. Pass null or an invalid index to remove focus.

Parameters:indexnumber

reset

Resets the MultiSelect by clearing the text and value. This method does not trigger the selectionChange and valueChange events.

toggle

Toggles the visibility of the popup or actionSheet (see example). If you use the toggle method to open or close the popup or actionSheet, the respective open and close events will not be fired.

Parameters:open?boolean

The state of the popup.

In this article
DefinitionInputsadaptiveModeadaptiveSubtitleadaptiveTitleallowCustomautoClosecheckboxesclearButtondatadisabledfillModefilterableinputAttributesitemDisabledlistHeightloadingplaceholderpopupSettingsreadonlyroundedshowStickyHeadersizetabindextagMappertextFieldvaluevalueFieldvalueNormalizervaluePrimitivevirtualFieldsisOpenEventsblurcloseclosedfilterChangefocusinputBlurinputFocusopenopenedremoveTagvalueChangeMethodsblurfocusfocusItemAtresettoggle
Not finding the help you need?
Contact Support