paper-dropdown - Vaadin Add-on Directory
A wrapper for paper-dropdown-menu to enable various features like multi-select, search / filter of items, key value pair and 2-way binding on value.[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/pushkar8723/paper-dropdown)
## <paper-dropdown>
`paper-dropdown` is a wrapper for `paper-dropdown-menu` to enable various features like multi-select, search / filter of
items, key value pair and 2-way binding on value.
**Doc:** https://paper-dropdown.netlify.com/#/elements/paper-dropdown
**Demo:** https://paper-dropdown.netlify.com/#/elements/paper-dropdown/demos/demo/index.html
Values can be bound using `value` attribute.
**Example**
```html
Apple
Banana
Mango
Orange
Tomato
```
Each item can have a key-value pair where key is what stored in the model but
label is what user sees. This can be done using `value` attribute for `paper-item`
**Example**
```html
Apple
Banana
Mango
Orange
Tomato
```
It also has an optional parameter named `searchable`, which when set to true
will add a text field at the start of the dropdown which users can use to filter
out the items in the dropdown.
**Example**
```html
Apple
Banana
Mango
Orange
Tomato
```
For multi-select, set `mutli` parameter to true. In this case however, paper-item's `value` attribute must be set.
**Example**
```html
Apple
Banana
Mango
Orange
Tomato
```
A very common usecase for dropdown is where items are dynamic. Following example shows how to use paper-dropdown with template repeat.
**Example**
```html
{{item.value}}
Seleted Item: {{value}}
```
### Styling
Since `paper-dropdown` is wrapper around `paper-dropdown-menu`, you can use any of the `paper-dropdown-menu`, `paper-input-container` and `paper-menu-button` style mixins and custom properties to style the internal input and menu button respectively.
Seleted Item: {{value}}