diff --git a/README.md b/README.md
index a823484..eb58c7a 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,7 @@ Dropdown menu with search and multiple options selection
 
 
 * autoValidate - boolean
+* customObjectOptions - Boolean, Default: false
 * disabled - Boolean Default: false
 * dynamicAlign - Boolean Default: false
 * emptyValue - Boolean Default: false
@@ -16,14 +17,19 @@ Dropdown menu with search and multiple options selection
 * label - String
 * menuOpened - Boolean Default: false – notifies
 * multi - Boolean Default: false
+* noChangeEvent - Boolean, Default: false
+* optionLabel - String, Default: label
 * options - Array
+* optionValue - String, Default: 'value'
 * placeholder - string
 * required - boolean
 * search - String
+* selected - Number/Array - notifies
 * selectedValues - Object notifies
 * showLimitWarning - Boolean
 * shownItems - Array
 * shownItemsLimit - Number Default: 50
+* updateSelected - Boolean, Default: false
 * value - String
 
 ## Usage
@@ -121,6 +127,54 @@ this.$.dropdownElement.validate();
 this.$.dropdownElementMulti.validate();
 ```
 
+If the options array where objects of this model: `{value: someIntegerValue, label: someLabel}` 
+is not what you need you can use any type of objects. You have to set some properties on the element to tell 
+that you have custom options and which properties to be used as values and labels.
+```javascript
+// options example(used in the demo), in properties object
+customObjOptions: {
+    type: Array,
+    value: function() {
+      var opt = [];
+      for(var i = 1; i <= 100; i++) {
+        opt.push({
+          id: i,
+          option_key: 'opt' + i,
+          option_label: 'Option ' + i,
+          some_other_propery: 'dummy propery for objIdx' + (i -1)
+        });
+      }
+      return opt;
+    }
+}
+```
+```html
+<etools-searchable-multiselection-menu
+        label="Searchable menu, custom objects"
+        options="[[customObjOptions]]"
+        custom-object-options
+        option-value="option_key"
+        option-label="option_label"
+        on-value-change="_singleSelectionChanged"></etools-searchable-multiselection-menu>
+```
+
+If you need only select an option and get option ID (most use cases) or an array of IDs(for multiselection) 
+you can use `selected` property of the element. It only works for integer values, for other types use `selectedValues` property.
+Additionally you can chose to block the change event. Example:
+
+```html
+<p>SelectedID: [[selectedId]]</p>
+<etools-searchable-multiselection-menu
+    label="Searchable menu, custom objects"
+    options="[[customObjOptions]]"
+    custom-object-options
+    option-value="id"
+    option-label="option_label"
+    selected="{{selectedId}}"
+    update-selected no-change-event>
+</etools-searchable-multiselection-menu>
+```
+
 ## Styling
 
 Use this css variables and mixins to style this element.
diff --git a/bower.json b/bower.json
index 1640b81..dde5b2d 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "etools-searchable-multiselection-menu",
   "description": "Dropdown menu with search and multiple options selection",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "license": "https://github.com/unicef-polymer/etools-searchable-multiselection-menu/blob/master/LICENSE.md",
   "main": "etools-searchable-multiselection-menu.html",
   "dependencies": {
diff --git a/deletable-option-list.html b/deletable-option-list.html
index 3c91838..fcbafc1 100644
--- a/deletable-option-list.html
+++ b/deletable-option-list.html
@@ -2,94 +2,116 @@
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
 
 <dom-module id="deletable-option-list">
-    <template>
-        <style>
-            :host {
-                height: 100%;
-            }
+  <template>
+    <style>
+      :host {
+        height: 100%;
+      }
 
-            span {
-                display: inline-block;
-                width: auto;
-                height: auto;
-                margin-right: 8px;
-                font-size: 16px;
-                line-height: 24px;
-                color: var(--esmm-option-list-color, #212121);
-            }
+      span {
+        display: inline-block;
+        width: auto;
+        height: auto;
+        margin-right: 8px;
+        font-size: 16px;
+        line-height: 24px;
+        color: var(--esmm-option-list-color, #212121);
+      }
 
-            span.placeholder {
-                color: rgba(0,0,0,.38);
-            }
+      span.placeholder {
+        color: rgba(0, 0, 0, .38);
+      }
 
-            paper-icon-button {
-                color: red;
-                opacity: 0.54;
-                padding: 0;
-                height: 18px;
-                width: 18px;
-            }
+      paper-icon-button {
+        color: red;
+        opacity: 0.54;
+        padding: 0;
+        height: 18px;
+        width: 18px;
+      }
 
-            .custom-input {
-                height: auto;
-                padding-right: 24px;
-            }
+      .custom-input {
+        height: auto;
+        padding-right: 24px;
+      }
 
-            *[hidden] {
-                display: none;
-            }
-        </style>
+      *[hidden] {
+        display: none;
+      }
+    </style>
 
-        <div class="paper-input-input custom-input">
+    <div class="paper-input-input custom-input">
 
-            <template is="dom-if" if="[[_showPlaceHolder(optionValue)]]">
-                <span class="placeholder">[[placeholder]]</span>
-            </template>
+      <template is="dom-if" if="[[_showPlaceHolder(optionValue)]]">
+        <span class="placeholder">[[placeholder]]</span>
+      </template>
 
-            <template is="dom-repeat" items="[[optionValue]]">
-                <span>
-                    {{item.label}}
-                    <paper-icon-button hidden$="[[disabled]]" icon="close" on-click="_fireClose"></paper-icon-button>
-                </span>
-            </template>
-        </div>
+      <template is="dom-repeat" items="[[optionValue]]">
+        <span>
+          {{_getItemLabel(item)}}
+          <paper-icon-button hidden$="[[disabled]]" icon="close" on-click="_fireClose"></paper-icon-button>
+        </span>
+      </template>
+    </div>
 
+  </template>
 
-    </template>
+  <script>
+    Polymer({
+      is: 'deletable-option-list',
 
-    <script>
-        Polymer({
-            is: 'deletable-option-list',
+      properties: {
+        placeholder: String,
+        optionValue: {
+          type: Array,
+          value: [],
+          notify: true
+        },
+        disabled: {
+          type: Boolean,
+          value: false
+        },
+        customObjectOptions: {
+          type: Boolean,
+          value: false
+        },
+        optionValueAttribute: {
+          type: String,
+          value: 'value'
+        },
+        optionLabelAttribute: {
+          type: String,
+          value: 'label'
+        }
+      },
 
-            properties: {
-                placeholder: String,
-                optionValue: {
-                    type: Array,
-                    value: [],
-                    notify: true
-                },
-                disabled: {
-                    type: Boolean,
-                    value: false
-                }
-            },
+      _getItemLabel: function(item) {
+        return item[this.optionLabelAttribute];
+      },
 
-            _showPlaceHolder: function(optionValue) {
-                return !optionValue || !optionValue.length;
-            },
+      _showPlaceHolder: function(optionValue) {
+        return !optionValue || !optionValue.length;
+      },
 
-            _fireClose: function(e) {
-                if(this.disabled) {
-                    return;
-                }
-                var details = e.model.item;
-                var newValue = this.optionValue.filter(function(item) {
-                    return parseInt(item.value, 10) !== parseInt(details.value, 10)
-                });
-                newValue = newValue.length > 0 ? newValue : null;
-                this.set('optionValue', newValue);
-                this.fire('option-delete', details);
-            },
-        });
-    </script>
+      _fireClose: function(e) {
+        if (this.disabled) {
+          return;
+        }
+        var details = e.model.item;
+        var removedItemStrValue = (details[this.optionValueAttribute])
+            ? (details[this.optionValueAttribute] + '') : '';
+        var newValue = this.optionValue.filter(function(item) {
+          if (this.customObjectOptions) {
+            var optValue = (item[this.optionValueAttribute]) ? (item[this.optionValueAttribute] + '') : '';
+            return optValue !== removedItemStrValue;
+          } else {
+            return parseInt(item[this.optionValueAttribute], 10) !== parseInt(details[this.optionValueAttribute], 10);
+          }
+        }.bind(this));
+        newValue = newValue.length > 0 ? newValue : null;
+        this.set('optionValue', newValue);
+        this.fire('option-delete', details);
+      },
+    });
+  </script>
 </dom-module>
diff --git a/demo/demo-custom-objects-as-options.html b/demo/demo-custom-objects-as-options.html
new file mode 100644
index 0000000..92559ec
--- /dev/null
+++ b/demo/demo-custom-objects-as-options.html
@@ -0,0 +1,170 @@
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../etools-searchable-multiselection-menu.html">
+
+<dom-module id="demo-custom-objects-as-options">
+  <template>
+    <h3>Old way type of objects with integer value and label string (still working)</h3>
+    <etools-searchable-multiselection-menu
+        label="Searchable menu"
+        options="[[realOptions]]"
+        on-value-change="_singleSelectionChanged"></etools-searchable-multiselection-menu>
+
+    <h3>Single selection, custom objects as options</h3>
+    <etools-searchable-multiselection-menu
+        label="Searchable menu, custom objects"
+        options="[[customObjOptions]]"
+        custom-object-options
+        option-value="option_key"
+        option-label="option_label"
+        on-value-change="_singleSelectionChanged"></etools-searchable-multiselection-menu>
+
+    <h3>Multiple selection. Old way type of objects with integer value and label string (still working)</h3>
+    <etools-searchable-multiselection-menu
+        label="Multi searchable menu"
+        options="[[realOptions]]"
+        placeholder="Please select the options"
+        on-value-change="_multiSelectionChanged"
+        multi></etools-searchable-multiselection-menu>
+
+    <h3>Multiple selection, custom objects as options</h3>
+    <etools-searchable-multiselection-menu
+        label="Multi searchable menu, custom objects"
+        options="[[customObjOptions]]"
+        custom-object-options
+        option-value="option_key"
+        option-label="option_label"
+        placeholder="Please select the options"
+        on-value-change="_multiSelectionChanged"
+        multi></etools-searchable-multiselection-menu>
+
+    <h3>Custom objects as options and selected property with no change events</h3>
+
+    <p><span>SelectedID:</span> [[selectedId]]</p>
+    <etools-searchable-multiselection-menu
+        label="Searchable menu, custom objects"
+        options="[[customObjOptions]]"
+        custom-object-options
+        option-value="id"
+        option-label="option_label"
+        selected="{{selectedId}}"
+        update-selected no-change-event></etools-searchable-multiselection-menu>
+
+    <p><span>SelectedIDs:</span> [[_returnIdsString(selectedIds)]]</p>
+    <etools-searchable-multiselection-menu
+        label="Multi searchable menu, custom objects"
+        options="[[customObjOptions]]"
+        custom-object-options
+        option-value="id"
+        option-label="option_label"
+        selected="{{selectedIds}}"
+        update-selected no-change-event
+        placeholder="Please select the options"
+        multi></etools-searchable-multiselection-menu>
+
+    <h3>A few options selected by default example</h3>
+    <etools-searchable-multiselection-menu
+        label="Searchable menu, custom objects"
+        options="[[customObjOptions]]"
+        value="[[selectedObjOptions]]"
+        custom-object-options
+        option-value="option_key"
+        option-label="option_label"
+        on-value-change="_singleSelectionChanged"></etools-searchable-multiselection-menu>
+
+    <etools-searchable-multiselection-menu
+        label="Multi searchable menu, custom objects"
+        options="[[customObjOptions]]"
+        value="[[selectedObjOptions]]"
+        custom-object-options
+        option-value="id"
+        option-label="option_label"
+        selected="{{selectedIds}}"
+        update-selected no-change-event
+        placeholder="Please select the options"
+        multi></etools-searchable-multiselection-menu>
+
+
+  </template>
+  <script>
+    (function() {
+      // jscs:disable
+      'use strict';
+
+      Polymer({
+        is: 'demo-custom-objects-as-options',
+
+        properties: {
+
+          realOptions: {
+            type: Array,
+            value: function() {
+              var opt = [];
+              for(var i = 1; i <= 10; i++) {
+                opt.push({value: i, label: 'Option ' + i});
+              }
+              return opt;
+            }
+          },
+
+          customObjOptions: {
+            type: Array,
+            value: function() {
+              var opt = [];
+              for(var i = 1; i <= 100; i++) {
+                opt.push({
+                  id: i,
+                  option_key: 'opt' + i,
+                  option_label: 'Option ' + i,
+                  some_other_property: 'dummy propery for objIdx' + (i -1)
+                });
+              }
+              return opt;
+            }
+          },
+
+          selectedObjOptions: {
+            type: Array,
+            value: function() {
+              var opt = [];
+              for(var i = 3; i <= 5; i++) {
+                opt.push({
+                  id: i,
+                  option_key: 'opt' + i,
+                  option_label: 'Option ' + i,
+                  some_other_property: 'dummy propery for objIdx' + (i -1)
+                });
+              }
+              return opt;
+            }
+          },
+
+          selectedId: {
+            type: Number,
+            value: null
+          },
+          selectedIds: {
+            type: Array,
+            value: []
+          }
+        },
+
+        ready: function() {
+//          this.set('selectedValues',  [{value: 2, label: 'Option 2'}]);
+        },
+
+        _returnIdsString: function(vals) {
+          return vals.join(', ');
+        },
+
+        _singleSelectionChanged: function(event) {
+          console.log('_singleSelectionChanged', event.detail);
+        },
+
+        _multiSelectionChanged: function(event) {
+          console.log('_multiSelectionChanged', event.detail);
+        }
+      });
+
+    })();
+  </script>
+</dom-module>
diff --git a/demo/index.html b/demo/index.html
index 69954b2..22b7c42 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -13,6 +13,7 @@
     <link rel="import" href="demo-helper.html">
     <link rel="import" href="demo-with-change-event.html">
     <link rel="import" href="demo-error-messages-and-validations.html">
+    <link rel="import" href="demo-custom-objects-as-options.html">
 
     <style is="custom-style" include="demo-pages-shared-styles">
       .vertical-section-container {
@@ -130,6 +131,14 @@ <h2>Error messages and validations</h2>
         </template>
       </demo-snippet>
 
+      <h2>Custom objects as options. You can specify value and label properties from object option to be used.</h2>
+
+      <demo-snippet>
+        <template>
+          <demo-custom-objects-as-options></demo-custom-objects-as-options>
+        </template>
+      </demo-snippet>
+
     </div>
 
   </body>
diff --git a/etools-searchable-multiselection-menu.html b/etools-searchable-multiselection-menu.html
index cfc7bea..37ef113 100644
--- a/etools-searchable-multiselection-menu.html
+++ b/etools-searchable-multiselection-menu.html
@@ -68,6 +68,13 @@
       .value-container {
         position: relative;
       }
+      
+      paper-input.value-container {
+        --paper-input-container-input: {
+          padding-right: 24px;
+          box-sizing: border-box;
+        };
+      }
 
       #dropdownMenu {
         position: absolute;
@@ -154,7 +161,7 @@
           cursor: pointer;
         };
       }
-      .multiInputContainer {
+      .multi-input-container {
         outline: none;
       }
 
@@ -169,7 +176,7 @@
           on-tap="_openMenu"
           on-focus="_openMenu"
           label="[[label]]"
-          value="[[value.label]]"
+          value="[[_getSingleSelectedOptionLabel(value)]]"
           disabled="[[disabled]]"
           error-message="[[errorMessage]]"
           required$="[[_simpleRequired(required)]]"
@@ -184,7 +191,7 @@
         <div class="multi-container">
 
           <paper-input-container
-            class="multiInputContainer"
+            class="multi-input-container"
             id="customPaperInput"
             tabindex="0"
             on-tap="_openMenu"
@@ -201,6 +208,9 @@
             <deletable-option-list on-option-delete="_removeItem"
               class="paper-input-input"
               option-value="{{value}}"
+              custom-object-options="[[customObjectOptions]]"
+              option-value-attribute="[[optionValue]]"
+              option-label-attribute="[[optionLabel]]"
               disabled="[[disabled]]"
               placeholder=[[placeholder]]>
             </deletable-option-list>
@@ -216,7 +226,7 @@
         horizontal-align="right"
         id="dropdownMenu"
         ignore-select
-        opened="{{menuOpened}}"
+        opened="[[menuOpened]]"
         restore-focus-on-close$="{{falseValue}}"
         on-paper-dropdown-close="_valueSelected"
         on-paper-dropdown-open="_onDropdownOpen"
@@ -326,7 +336,8 @@
             reflectToAttribute: true
           },
           selectedValues: {
-            notify: true
+            notify: true,
+            observer: '_updateSelected'
           },
           menuOpened: {
             type: Boolean,
@@ -346,6 +357,33 @@
           dynamicAlign: {
             type: Boolean,
             value: false
+          },
+          customObjectOptions: {
+            type: Boolean,
+            value: false
+          },
+          optionValue: {
+            type: String,
+            value: 'value'
+          },
+          optionLabel: {
+            type: String,
+            value: 'label'
+          },
+          selected: {
+            // this will be populated with integer value, in case of single selection,
+            // or will be an Array of integer values (example: you may need an array of integer values selected, IDs,
+            // without having the need to map the selectedValues in parent and convert to integer values)
+            // it will work only if optionValue is set to 'id'
+            notify: true
+          },
+          updateSelected: {
+            type: Boolean,
+            value: false
+          },
+          noChangeEvent: {
+            type: Boolean,
+            value: false
           }
         },
         ready: function() {
@@ -359,13 +397,22 @@
           var filtered = JSON.parse(JSON.stringify(options));
           if (searchKey && searchKey.length > 0) {
             filtered = options.filter(function(item) {
-              return item.label && item.label.toLowerCase().indexOf(searchKey.toLowerCase()) > -1;
-            });
+              return item[this.optionLabel] && item[this.optionLabel].toLowerCase().indexOf(searchKey.toLowerCase()) > -1;
+            }.bind(this));
             filtered = filtered.slice(0, Math.min(this.shownItemsLimit, filtered.length));
           } else if (options.length > this.shownItemsLimit) {
             filtered = options.slice(0, Math.min(this.shownItemsLimit, options.length));
           }
 
+          if (this.customObjectOptions) {
+            filtered = filtered.map(function(filteredOption) {
+              return {
+                value: filteredOption[this.optionValue],
+                label: filteredOption[this.optionLabel]
+              };
+            }.bind(this));
+          }
+
           if (emptyValue) {
             filtered.unshift({value: null, label: '-- None --', style: 'emptyValue'});
           }
@@ -391,56 +438,138 @@
           }
         },
         _valueChanged: function(value) {
-          if (this.multi && value && value.length > 0 ) {
+          if (!value) {
+            // empty value/reset selection
+            this.set('selectedValues', null);
+            return;
+          }
+          if (this.multi && Array.isArray(value) && value.length > 0 ) {
+            // multiple selection on
             this.set('selectedValues', value.map(function(item) {
-              return '' + item.value;
-            }));
+              return '' + item[this.optionValue];
+            }.bind(this)));
           } else if (!this.multi && Array.isArray(value) && value.length > 0) {
             /**
              * In case the single selection dropdown is initialized with an array of one object
              * value and selectedValues must be updated with that object data
              */
             this.set('value', value[0]);
-            this.set('selectedValues', [value[0].value]);
-          } else if (!value) {
-            this.set('selectedValues', null);
+            this.set('selectedValues', [value[0][this.optionValue]]);
           }
         },
-        _valueSelected: function() {
-          var self = this;
-          if(this.selectedValues === null) {
-            this.set('value', null);
-            this._fireValueChangeEvent();
+        // get esmm single selection selected label to be displayed
+        _getSingleSelectedOptionLabel: function(value) {
+          if (typeof value === 'object' && value[this.optionLabel]) {
+            return value[this.optionLabel];
           }
-          if (this.selectedValues instanceof Array) {
-            var newValue = [];
-            this.selectedValues.forEach(function(selected) {
-              self.options.forEach(function(option) {
-                if (parseInt(option.value, 10) === parseInt(selected, 10)) {
+          return null;
+        },
+        _valueSelected: function() {
+          // this could be fired twice almost in the same time (on item tap and on dropdown close)
+          this.debounce('etoolsEsmmValueSelected', function() {
+            var self = this;
+            this.set('menuOpened', false);
+            if(this.selectedValues === null) {
+              // reset selected
+              this.set('value', null);
+              this._fireValueChangeEvent();
+              this.openedClass = '';
+              return;
+            }
+            if (this.selectedValues instanceof Array) {
+              // multiple selection
+              this._multipleValuesSelected();
+            } else {
+              // single selection
+              this._singleValueSelected();
+            }
+            this.openedClass = '';
+          }.bind(this), 50);
+        },
+
+        _singleValueSelected: function() {
+          this.options.forEach(function(item) {
+            if (this.customObjectOptions) {
+              var itemValue = this._prepareCustomOptionObjValue(item, this.optionValue);
+              if (itemValue === this.selectedValues) {
+                this.set('value', item);
+                this._fireValueChangeEvent();
+              }
+            } else {
+              // option values as integer value (old way)
+              if (item[this.optionValue] === parseInt(this.selectedValues, 10)) {
+                this.set('value', item);
+                this._fireValueChangeEvent();
+              }
+            }
+          }.bind(this));
+        },
+
+        _multipleValuesSelected: function() {
+          var newValue = [];
+          this.selectedValues.forEach(function(selected) {
+            this.options.forEach(function(option) {
+              if (this.customObjectOptions) {
+                var optionValue = this._prepareCustomOptionObjValue(option, this.optionValue);
+                if (optionValue === selected) {
+                  newValue.push(option);
+                }
+              } else {
+                if (parseInt(option[this.optionValue], 10) === parseInt(selected, 10)) {
                   newValue.push(option);
                 }
-              });
-            });
-            this._autoValidateMulti();
-            self.set('value', newValue);
-            self._fireValueChangeEvent();
-          } else {
-            this.options.forEach(function(item) {
-              if (item.value === parseInt(self.selectedValues, 10)) {
-                self.set('value', item);
-                self._fireValueChangeEvent();
               }
+            }.bind(this));
+          }.bind(this));
+          this._autoValidateMulti();
+          this.set('value', newValue);
+          this._fireValueChangeEvent();
+        },
+
+        _prepareCustomOptionObjValue: function(item, optionValue) {
+          // option values as any value (new way)
+          var itemValue = item[optionValue];
+          // some tweaks to ensure item value type
+          if (!itemValue) {
+            itemValue = '';
+          } else {
+            // convert to string because selectedValues it's gonna be a string for single selection
+            itemValue = itemValue + '';
+          }
+          return itemValue;
+        },
+
+        _updateSelected: function(selectedValues) {
+          if (!this.updateSelected || this.optionValue !== 'id'
+              || !selectedValues || Array.isArray(selectedValues) && selectedValues.length === 0) {
+            // do not update selected value
+            return;
+          }
+
+          if (this.multi && Array.isArray(selectedValues) && selectedValues.length > 0) {
+            var selectedVals = selectedValues.map(function(s) {
+              return parseInt(s, 10);
             });
+            this.set('selected', selectedVals);
+          }
+
+          if (!this.multi) {
+            this.set('selected', parseInt(selectedValues, 10));
           }
-          this.openedClass = '';
         },
 
         _removeItem: function(event, details) {
           var newSelected = [];
           if (this.selectedValues) {
+            var detailsValue = details[this.optionValue] ? (details[this.optionValue] + '') : '';
             newSelected = this.selectedValues.filter(function(item) {
-              return parseInt(item, 10) !== parseInt(details.value, 10);
-            });
+              if (this.customObjectOptions) {
+                var itemValue = item ? (item + '') : '';
+                return itemValue !== detailsValue;
+              } else {
+                return parseInt(item, 10) !== parseInt(details.value, 10);
+              }
+            }.bind(this));
           }
           this._autoValidateMulti();
           this.set('selectedValues', newSelected);
@@ -468,6 +597,9 @@
         },
 
         _fireValueChangeEvent: function() {
+          if (this.noChangeEvent) {
+            return;
+          }
           this.debounce('fireValueChanged', function () {
             var selectedValues = null;
             if ((typeof this.value === 'object' && this.value !== null) ||