JavaScript/jQuery DropDownBox - Overview

jQuery

DevExtreme DropDownBox is an advanced editor that supports in-depth customization. The component consists of a text field and a drop-down area. The drop-down area can contain custom markup, including other DevExtreme components.

Angular

DevExtreme DropDownBox is an advanced editor that supports in-depth customization. The component consists of a text field and a drop-down area. The drop-down area can contain custom markup, including other DevExtreme components.

Vue

DevExtreme DropDownBox is an advanced editor that supports in-depth customization. The component consists of a text field and a drop-down area. The drop-down area can contain custom markup, including other DevExtreme components.

React

DevExtreme DropDownBox is an advanced editor that supports in-depth customization. The component consists of a text field and a drop-down area. The drop-down area can contain custom markup, including other DevExtreme components.

IMPORTANT
DevExtreme ships with multiple drop-down editors. To find out which editor best suits your task, refer to the following help topic: How to Choose a Drop-Down Editor.

This overview highlights DropDownBox elements, key features, and what to explore next.

Elements

DropDownBox Elements

  1. Text Field
  2. Value
  3. Clear Button
  4. Placeholder
  5. Dropdown Button
  6. Text Field
  7. Dropdown Content - TreeView
  8. Dropdown Content - DataGrid

Key Features

  • Embed DevExtreme Components
    You can embed any DevExtreme component within the DropDownBox. To display data, we recommend the DevExtreme DataGrid, TreeView, and CardView components.

  • Synchronize with Embedded Component
    To synchronize DropDownBox with its embedded component, refer to the following tutorial: Synchronize with the Embedded Element

  • Selection
    You can configure DropDownBox selection to display single or multiple values.

  • Validation
    DropDownBox ships with data validation capabilities. You can implement custom logic to validate the component value and display a validation status to users.

  • Text Field Customization
    You can specify a text field label and placeholder, as well as configure custom or predefined buttons (clear and drop-down). To implement further customizations, you can specify a text field template.

  • Accessibility and Keyboard Navigation
    DropDownBox conforms to WCAG 2.x, European Accessibility Act (EAA), and Americans with Disabilities Act (ADA) standards. The component supports keyboard navigation and custom key handlers. DropDownBox also ships with right-to-left (RTL) representation support.

Explore More