React DropDownList

  • Extending upon the Select HTML element, this React DropDownList component adds features such as filtering and virtualization.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • Overview

    The KendoReact DropDownList component is a form component that enables end users to choose a single predefined value from a list, without support for typing in values, and is a richer form of the select element. Unlike other similar dropdown components, the React DropDownList does not include an input element that can be used for typing a value, and instead, can only be updated by selecting an option from the available list of data.

    See React DropDownList Overview demo

    React DropDownList - Overview, KendoReact UI Library
  • Data Binding

    The KendoReact DropDownList can be bound to various forms of data, including datasets of objects, an array of primitive values or binding directly to a single value property. Additionally, the React DropDownList can bind separate fields to the displayed text and the underlying value.

    See React DropDownList Data Binding demo

  • Default Item

    By Default, the KendoReact DropDownList will render an empty area if no value has been displayed. Some requirements may call for some sort of placeholder string indicating what the DropDownList component is for, which is where the default item feature comes in. By setting this property, a custom string will be displayed in the React DropDownList when no item is selected.

    See React DropDownList Default Item demo

    React DropDownList - Default Item, KendoReact UI Library
  • Filtering

    The built-in filtering mechanism of the KendoReact DropDownList automatically reduces the number of available choices in the DropDownList data list. Rather than displaying in the input of the React component, the filter appears as a search box at the top of the drop down. Filtering can be configured in various ways, including "starts with" or "contains" to ensure the most intuitive filtering behavior for any scenario.

    See React DropDownList Filtering demo

    React DropDownList - Filtering, KendoReact UI Library
  • Custom Rendering

    Out of the box, the KendoReact ComboBox renders items as plain text. For requirements that need more intricate items, the React DropDownList can take advantage of custom renderers to customize every aspect of the DropDownList. Areas like the list items, the list value, the header and footer areas, as well as the no data message area can be completely customized.

    See React DropDownList Custom Rendering demo

    React DropDownList - Custom Rendering, KendoReact UI Library
  • Virtualization

    A DropDownList can sometimes be bound to thousands or hundreds of thousands of data items which can impact the performance of even the fastest browsers. With the virtualization feature of the KendoReact DropDownList, scrolling through large amounts of data can be done without impacting the performance of the page.

    See React DropDownList Virtualization demo

    React DropDownList - Virtualization, KendoReact UI Library
  • Forms Support

    The KendoReact DropDownList is often used as a part of a form to assist with selecting data from a long list of available options. With this in mind, the React DropDownList supports being added to any plain form element or integrated in to an existing React Form library, including the KendoReact Form component.

    See React DropDownList Forms Support demo

    React DropDownList - Forms Support, KendoReact UI Library
  • Globalization

    For applications that require support for multiple cultures, the DropDownList has built-in support for updating internal messages to a different language and also can be used in a right-to-left setup by setting a single attribute.

    See React DropDownList Globalization demo

    React DropDownList - Globalization, KendoReact UI Library
  • Keyboard Navigation

    Keyboard navigation has become a crucial part of website navigation for several reasons ranging from speed of data input to accessibility concerns. Understanding this, the KendoReact DropDownList comes with keyboard navigation support out of the box to assist with navigating through and selecting an item by only using the keyboard.

    See React DropDownList Keyboard Navigation demo

  • Accessibility

    Creating accessible React UI components is a core concept of KendoReact, and the DropDownList is no exception! The KendoReact DropDownList is complaint with Section 508 standards, is AA rated with WCAG 2.0 and follows WAI-ARIA standards.

    See React DropDownList Accessibility demo

    React Accessibility - KendoReact

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.