Kendo UI for Angular MultiSelect Overview

The Kendo UI for Angular MultiSelect is a form component that displays a list of options and allows for multiple selections from this list.

It is a richer version of the <select> element and supports item and tag templates, and configurable options for controlling the list behavior.

The MultiSelect Component is part of Kendo UI for Angular, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The following example demonstrates the MultiSelect in action.

View Source
Change Theme:

Key Features

  • Data binding—You can bind the MultiSelect to a list of possible values containing arrays of primitive or complex data.
  • Value binding—The MultiSelect enables you to set its value to primitive or complex data.
  • Custom values—You can override the default behavior of the MultiSelect and configure it to accept custom values.
  • Checkboxes—The MultiSelect allows you to implement checkboxes for managing its items selection.
  • Filtering—Apart from its default filter functionality, the MultiSelect provides options for setting a minimum length of the search symbols and a built-in filter directive.
  • Grouping—You can group MultiSelect items and display them as a grouped result.
  • Virtualization—The MultiSelect supports a virtualization mechanism which noticeably improves the performance of the component when it handles large datasets.
  • Disabled items—You can disable any of the MultiSelect items and prevent users from interacting with them.
  • Summary-tag mode—The MultiSelect allows you to customize the display of its selected tags.
  • Templates—You can customize the content of the MultiSelect by using templates for its tag, header, footer, and other elements.
  • Forms support—You can use the MultiSelect both in template-driven and reactive Angular forms.
  • Controlling the open state—The MultiSelect enables you to configure the initially opened item and prevent the opening and closing of its options list.
  • Globalization—All Kendo UI for Angular Dropdowns provide globalization options.
  • Accessibility—The MultiSelect is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigation—The MultiSelect supports a number of keyboard shortcuts for processing various commands.

To learn more about the appearance, anatomy, and accessibility of the MultiSelect, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

Support and Learning Resources

Additional Resources