Kendo UI for Vue
The Kendo UI for Vue MultiSelect is a powerful component that displays a list of predefined options which can be selected on user interaction. Each selected option from the popup appears as a tag in the input of the component.
The MultiSelect has a wide range of customization options:
For the scenarios with a big number of popup items, the MuliSelect also provides data virtualization.See Kendo UI for Vue MultiSelect Overview Demo
The Kendo UI for Vue MultiSelect supports binding to datasets of objects, arrays of primitive values, or single value properties.
The Kendo UI for Vue MultiSelect comes with a built-in filtering mechanism for reducing the choices in the component’s dropdown. The data in the popup can be filtered with a various number of operators like “contains”, “starts with”, etc., covering the requirements of every filtering scenario.Kendo UI for Vue MultiSelect Filtering example
Each value selected in the MultiSelect is displayed as a tag in its input. The component provides an option for customizing the way the selected tags will be displayed. Custom tags can be defined for both scenarios when multiple tags or a single tag that represents all selected options should be displayed in the component.
With the MultiSelect, we can customize the way the options in the dropdown list will be displayed. This option fulfills the other customization possibilities supported by the component:
Kendo UI for Vue MultiSelect can contain thousands of options in its popup list. With the Virtualization option enabled, the scrolling of many records won’t аffect the smooth work of the component.Kendo UI for Vue MultiSelect Virtualization example
After gaining popularity in recent years, the floating label functionality is also available in the MultiSelect. What you should do to activate it is to set a single configuration property. The rest will be done by the component.
The Kendo UI for Vue MultiSelect is shipped with built-in styles for displaying invalid data state. The component also provides the option for displaying custom validation messages. Add the MultiSelect to any HTML form and instantly enjoy all of its built-in features.Kendo UI for Vue MultiSelect Forms Support example
The language of the built-in messages and the text direction in the MultiSelect can be easily changed by setting different user locales.
The implementation of the MultiSelect component follows the WAI-ARIA and Section 508 standards. It is accessible by screen readers and other assistive technologies. The component also has an integrated Keyboard Navigation. This navigation enables the users to traverse and select items within the MultiSelect using only the keyboard.Kendo UI for Vue MultiSelect Keyboard Navigation example