DropDownBox: Add Overview (#7755)

Author: arman-boyakhchyan

concepts/05 UI Components/DropDownBox/03 Overview/00 Overview.md

@@ -0,0 +1,23 @@
+---
+
+##### 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](/Documentation/Guide/jQuery_Components/DevExtreme_jQuery_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](/Documentation/Guide/Angular_Components/DevExtreme_Angular_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](/Documentation/Guide/Vue_Components/DevExtreme_Vue_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](/Documentation/Guide/React_Components/DevExtreme_React_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](/Documentation/Guide/UI_Components/Lookup/Choose_a_Drop-Down_Editor/).
+
+This overview highlights DropDownBox elements, key features, and what to explore next.

concepts/05 UI Components/DropDownBox/03 Overview/05 Elements.md

@@ -0,0 +1,10 @@
+![DropDownBox Elements](/images/DropDownBox/dropdownbox-elements.png)
+
+1. Text Field
+2. [Value](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#value)
+3. [Clear Button](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#showClearButton)
+4. [Placeholder](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#placeholder)
+5. [Dropdown Button](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#showDropDownButton)
+6. Text Field
+7. [Dropdown Content](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#contentTemplate) - [TreeView](/Documentation/Guide/UI_Components/TreeView/Overview/)
+8. [Dropdown Content](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#contentTemplate) - [DataGrid](/Documentation/Guide/UI_Components/DataGrid/Overview/)

concepts/05 UI Components/DropDownBox/03 Overview/10 Key Features.md

@@ -0,0 +1,17 @@
+- **Embed DevExtreme Components**    
+You can embed any DevExtreme component within the DropDownBox. To display data, we recommend the DevExtreme [DataGrid](/Documentation/Guide/UI_Components/DataGrid/Overview/), [TreeView](/Documentation/Guide/UI_Components/TreeView/Overview/), and [CardView](/Documentation/Guide/UI_Components/CardView/Overview/) components.
+
+- **Synchronize with Embedded Component**    
+To synchronize DropDownBox with its embedded component, refer to the following tutorial: [Synchronize with the Embedded Element](/Documentation/Guide/UI_Components/DropDownBox/Synchronize_with_the_Embedded_Element/)
+
+- **Selection**    
+You can configure DropDownBox selection to display single or multiple values.
+
+- **Validation**    
+DropDownBox ships with [data validation capabilities](/Documentation/Guide/UI_Components/Common/UI_Widgets/Data_Validation/). You can implement custom logic to validate the component value and display a [validation status](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#isValid) to users.
+
+- **Text Field Customization**    
+You can specify a text field [label](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#label) and [placeholder](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#placeholder), as well as configure [custom](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/buttons/) or predefined buttons ([clear](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#showClearButton) and [drop-down](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#showClearButton)). To implement further customizations, you can specify a [text field template](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#fieldTemplate).
+
+- **Accessibility and Keyboard Navigation**    
+DropDownBox [conforms](/Documentation/Guide/UI_Components/DropDownBox/Accessibility/) 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](/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#rtlEnabled)) representation support.

concepts/05 UI Components/DropDownBox/03 Overview/15 Explore More.md

@@ -0,0 +1,5 @@
+- [Getting Started with DropDownBox](/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/)
+
+- [API](/Documentation/ApiReference/UI_Components/dxDropDownBox/)
+
+- [Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DropDownBox/Overview/)