KendoReact

React ListBox

  • Enable your users to easily select items in a list or move items between multiple lists by adding this handy React ListBox interface.
  • 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 React ListBox provides an interface for displaying a list of items in a defined area that can be scrolled through. The component allows users to select, reorder, delete and drag and drop items. You can combine multiple KendoReact ListBoxes to enable users to move items between two or more lists. In this scenario, the component features options to add helpful buttons that render between the boxes to assist with moving single or multiple items back and forth the various ListBox instances.

    See React ListBox demo

    React ListBox Component
  • Selection

    When selection is enabled, the KendoReact ListBox component allows users to select single or multiple items.

    See React ListBox Selection demo

    React ListBox Component Selection
  • Drag and Drop

    The KendoReact ListBox component comes with drag and drop capabilities. This lets users reorder items within a single React ListBox or drag and drop items between multiple ListBox instances.

    See React ListBox Drag and Drop demo

    React ListBox Component Drag and Drop
  • Customization

    With the available customization options, there is no shortage of ways to make the React ListBox fit any and all scenarios. Each item within the ListBox can have its own custom template to control its layout, ensuring that the content is only limited by a developer’s imagination.

    See React ListBox Customization demo

    React ListBox Component Customization
  • Multiple Lists

    The KendoReact ListBox component allows for any number of React ListBoxes to be displayed and associated with each other through toolbars and drag and drop interactions.

    See React ListBox Multiple Lists demo

    React ListBox Component Multiple Lists
  • Globalization

    Globalization and internationalization ensure that applications can be properly localized and customized to fit various user locales. With this in mind, the React ListBox component integrates with the KendoReact Internationalization package to translate any built-in strings and also render right-to-left (RTL) scripts.

    See React ListBox Globalization demo

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.