# ej2-react-dropdowns

## Superset of HTML select box contains specific features such as data binding, grouping, sorting, filtering, and templates.

![](../../ReadMe_Images/gif.gif)

>Note: This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).

>A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers..

## 1. Setup To install this package and its dependent packages, use the following command

Use the following command to install drop-down components and its dependent packages

```
npm install @syncfusion/ej2-react-dropdowns
```

## 2. Components included

* DropDownList - A textbox component that allows users to select a non-editable single value from the list of predefined values.
    * [GettingStarted](https://ej2.syncfusion.com/react/documentation/drop-down-list/getting-started.html)
    * [View Online Demos](https://ej2.syncfusion.com/react/demos/#/material/dropdownlist)
    * [Product Page](https://www.syncfusion.com/products/react/dropdownlist)
* ComboBox - A textbox component that allows users to type a value or choose an option from the list of predefined options.
    * [GettingStarted](https://ej2.syncfusion.com/react/documentation/combo-box/getting-started.html)
    * [View Online Demos](https://ej2.syncfusion.com/react/demos/#/material/combobox/default.html)
    * [Product Page](https://www.syncfusion.com/products/react/combobox)
* Autocomplete - A textbox component that provides a list of suggestions to select based on the text typed by the users.
    * [GettingStarted](https://ej2.syncfusion.com/react/documentation/auto-complete/getting-started.html)
    * [View Online Demos](https://ej2.syncfusion.com/react/demos/#/material/autocomplete)
    * [Product Page](https://www.syncfusion.com/products/react/autocomplete)
* MultiSelect - A textbox component that allows users to type or choose multiple values from the list of predefined options.
    * [GettingStarted](https://ej2.syncfusion.com/react/documentation/multi-select/getting-started.html)
    * [View Online Demos](https://ej2.syncfusion.com/react/demos/#/material/multiselect)
    * [Product Page](https://www.syncfusion.com/products/react/multiselect)

## 3. Supported frameworks

Drop-down components also supports the following frameworks:
1.	[TypeScript](https://ej2.syncfusion.com/demos/#/material)
2.	[Angular](https://ej2.syncfusion.com/angular/demos/#/material)
3.	[Vue.js](https://ej2.syncfusion.com/vue/demos/#/material)
4.	[ASP.NET Core](https://aspdotnetcore.syncfusion.com)
5.	[ASP.NET MVC](http://aspnetmvc.syncfusion.com)
6.	[JavaScript (ES5)](https://ej2.syncfusion.com/javascript/demos/#/material)

## 4. Use-case samples / Showcase samples

* Expanse Tracker ([Live Demo](https://ej2.syncfusion.com/showcase/react/expensetracker/?utm_source=npm&utm_campaign=dropdown#/dashboard))
* Loan Calculator ([Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_campaign=dropdwonlist#/default))
* Web Mail ([Live Demo](https://ej2.syncfusion.com/showcase/react/webmail/#/home))

* DropDownList
    * [Data binding](https://ej2.syncfusion.com/react/demos/#/material/dropdownlist/data-binding.html): Binds and accesses the list of items from the local or server-side data source.
    * [Grouping](https://ej2.syncfusion.com/react/demos/#/material/dropdownlist/grouping-icon.html): Groups the logically related items under a single or specific category.
    * [Sorting](https://ej2.syncfusion.com/react/documentation/drop-down-list/api-dropDownList.html?lang=typescript#sortorder): Sorts the list items in alphabetical order (either ascending or descending).
    * [Filtering](https://ej2.syncfusion.com/react/demos/#/material/dropdownlist/filtering.html): Filters the list items based on a character typed in the search box.
    * [Templates](https://ej2.syncfusion.com/react/demos/#/material/dropdownlist/template.html): Customizes the list items, selected value, header, footer, category group header, and no records content.
    * [Accessibility](https://ej2.syncfusion.com/react/documentation/drop-down-list/accessibility.html?lang=typescript): Provided with built-in accessibility support used to access all the DropDownList component features using keyboard, screen readers, or other assistive technology devices.


* ComboBox
    * [Data binding](https://ej2.syncfusion.com/react/demos/#/material/combobox/databinding.html): Binds and accesses the list of items from local or server-side data source.
    * [Custom values](https://ej2.syncfusion.com/react/demos/#/material/combobox/custom-value.html): Sets user-defined values that is not in the pop-up list.
    * [Grouping](https://ej2.syncfusion.com/react/demos/#/material/combobox/grouping-icon.html): Groups the logically related items under a single or specific category.
    * [Sorting](https://ej2.syncfusion.com/react/documentation/combo-box/api-comboBox.html?lang=typescript#sortorder): Sorts the list items in alphabetical order (either ascending or descending).
    * [Filtering](https://ej2.syncfusion.com/react/demos/#/material/combobox/filtering.html): Filters the list items based on a character typed in the component.
    * [Templates](https://ej2.syncfusion.com/react/demos/#/material/combobox/template.html): Customizes the list items, selected value, header, footer, category group header, and no records content.
    * [Accessibility](https://ej2.syncfusion.com/react/documentation/combo-box/accessibility.html?lang=typescript): Provided with built-in accessibility support that helps to access all the ComboBox component features using the keyboard, screen readers, or other assistive technology devices.


* AutoComplete
    * [Data binding](https://ej2.syncfusion.com/react/demos/#/material/autocomplete/databinding.html): Binds and accesses the list of items from local or server-side data source.
    * [Grouping](https://ej2.syncfusion.com/react/demos/#/material/autocomplete/grouping-icon.html): Groups the logically related items under a single or specific category.
    * [Sorting](https://ej2.syncfusion.com/react/documentation/auto-complete/api-autoComplete.html?lang=typescript#sortorder): Sorts the list items in alphabetical order (either ascending or descending).
    * [Highlight search](https://ej2.syncfusion.com/react/demos/#/material/autocomplete/highlight.html): Highlights the typed text in the suggestion list.
    * [Templates](https://ej2.syncfusion.com/react/demos/#/material/autocomplete/template.html): Customizes the list item, header, footer, category group header, no records, and action failure content.
    * [Accessibility](https://ej2.syncfusion.com/react/documentation/auto-complete/accessibility.html?lang=typescript): Provided with built-in accessibility support that helps to access all the AutoComplete component features using keyboard, on-screen readers, or other assistive technology devices.


* MultiSelect
    * [Data binding](https://ej2.syncfusion.com/react/demos/#/material/multiselect/data-binding.html): Binds and accesses the list of items from local or server-side data source.
    * [Grouping](https://ej2.syncfusion.com/react/demos/#/material/multiselect/grouping.html): Groups the logically related items under a single or specific category.
    * [Templates](https://ej2.syncfusion.com/react/demos/#/material/multiselect/template.html): Customizes the list items, selected value, header, footer, category group header, and     no records content.
    * [Sorting](https://ej2.syncfusion.com/react/documentation/multi-select/api-multiSelect.html?lang=typescript#sortorder): Sorts the list items in alphabetical order (either ascending or descending).
    * [Filtering](https://ej2.syncfusion.com/react/demos/#/material/multiselect/filtering.html): Filters the list items based on a character typed in the search box.
    * [Custom value](https://ej2.syncfusion.com/16.2.41/react/demos/#/material/multiselect/customtag.html): Allows users to select a new custom value.
    * [Accessibility](https://ej2.syncfusion.com/react/documentation/multi-select/accessibility.html?lang=typescript): Provided with built-in accessibility support that helps to access all the      DropDownList component features using the keyboard, screen readers, or other assistive technology devices.

## 6. Support
Product support can be obtained through the following mediums:
* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=dropdwon) support system or [Community forum.](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=dropdwon)
* New [GitHub issue.](https://github.com/syncfusion/ej2-dropdowns/issues/new)
* Ask your query in Stack Overflow with tag ‘syncfusion’, ‘ej2’.

 
## 7. License 
Check the license details [here.](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_campaign=dropdown)

## 8. Change log 
 Check the changelog [here](https://github.com/syncfusion/ej2-react-dropdowns/blob/master/CHANGELOG.md)

© Copyright 2018 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
