KendoReact MultiSelect Overview
The KendoReact MultiSelect is a form component that displays a list of options and allows for multiple selections from this list and supports custom rendering of popup items and tags, header and footer elements, virtualization, and configurable options for controlling the list behavior.
The KendoReact MultiSelect component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-dropdowns package.
Use This React MultiSelect for FreeYou can use the free feature set of this MultiSelect in production—no sign-up or license required. It is part of KendoReact, an enterprise-grade UI library with 120+ free and premium components. To test-drive premium functionality such as virtualization, start a 30-day trial.The following example demonstrates the MultiSelect in action.
The following example demonstrates the built-in Select all option for quickly selecting all visible items and then removing exceptions.
The MultiSelect is part of the KendoReact Dropdowns component library. The procedures for installing, importing, and using the Dropdowns are identical for all components in the package. To learn how to use the MultiSelect and the rest of the Dropdowns, see the Getting Started with the KendoReact Dropdowns guide.
Key Features
- Data and value binding—You can bind the MultiSelect to primitive (strings and numbers) or complex (objects) items.
- Custom values—You can allow the MultiSelect component to accept custom values.
- Filtering (premium)—You can configure the MultiSelect to filter the results locally or on the server.
- Custom tags—You can customize how to render each of the value tags.
- Custom rendering—You can customize the way the MultiSelect component renders its elements.
- Select all—You can enable a built-in
selectAlloption to toggle all currently applicable items with a single interaction. - Virtualization (premium) —The virtual scrolling feature is an alternative to paging and helps display large data sets.
- Floating labels—You can show floating labels inside the KendoReact MultiSelect component.
- Forms support—You can use the React MultiSelect component with HTML form elements or with the KendoReact Form component.
- Globalization—The built-in globalization support allows you to create apps that are ready to be implemented worldwide.
- Keyboard navigation—The MultiSelect supports various keyboard shortcuts.
- Accessibility—The MultiSelect is accessible for screen readers and supports WAI-ARIA attributes.
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.