diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
index cb672fe919..e1e718e8ef 100644
--- a/src/components/dropdown/Dropdown.js
+++ b/src/components/dropdown/Dropdown.js
@@ -18,6 +18,7 @@ export class Dropdown extends Component {
         filter:false,
         filterBy:null,
         filterPlaceholder:null,
+        editable:false,
         placeholder:null
     };
 
@@ -33,6 +34,7 @@ export class Dropdown extends Component {
         filter:PropTypes.bool,
         filterBy: PropTypes.string,
         filterPlaceholder: PropTypes.string,
+        editable:PropTypes.bool,
         placeholder: PropTypes.string
     };
 
@@ -44,6 +46,8 @@ export class Dropdown extends Component {
         this.onInputBlur=this.onInputBlur.bind(this);
         this.onInputFocus=this.onInputFocus.bind(this);
         this.onKeydown=this.onKeydown.bind(this);
+        this.onEditableInputClick=this.onEditableInputClick.bind(this);
+        this.onEditableInputFocus=this.onEditableInputFocus.bind(this);
     }
 
     componentDidMount() {
@@ -286,6 +290,23 @@ export class Dropdown extends Component {
             this.documentClickListener = null;
         }
     }
+    onEditableInputFocus(event) {
+        this.setState({focus:true});
+        this.hide();
+    }
+
+    onEditableInputClick(event) {
+        this.optionClick = false;
+        event.stopPropagation();
+    }
+
+    onEditable(event){
+        this.editValue=event.target.value;
+        this.props.onChange({
+            originalEvent: event,
+            value: this.editValue
+        });
+    }
 
     render() {
         var styleClass = classNames('ui-dropdown ui-widget ui-state-default ui-corner-all', this.props.className, {
@@ -297,6 +318,7 @@ export class Dropdown extends Component {
         var label = selectedOption ? selectedOption.label : (this.props.options ? this.props.options[0].label : null);
         var listItems, optionElements;
         var filterInput,filter;
+        var editable;
 
         if(this.props.options) {
 
@@ -327,6 +349,12 @@ export class Dropdown extends Component {
             filter=<div className="ui-dropdown-filter-container" onChange={(event) => this.onFilter(event)}
                         onClick={this.onFilterInputClick} >{filterInput}<span className="fa fa-search" ></span></div>
         }
+        if(this.props.editable){
+            editable=<input type="text" className="ui-dropdown-label ui-inputtext ui-corner-all" value={selectedOption ? selectedOption.label:this.editValue?this.editValue:""}
+                            ref={(el) => {this.editableInput = el;}} onChange={(event) => this.onEditable(event)}
+                            onClick={this.onEditableInputClick} placeholder={this.props.placeholder}
+                            onFocus={this.onEditableInputFocus} onBlur={this.onInputBlur} />
+        }
 
         return (
             <div className={styleClass} onClick={this.onClick} ref={(el) => {this.container = el;}} style={this.props.style}>
@@ -337,7 +365,8 @@ export class Dropdown extends Component {
                     <input readOnly ref={(el) => {this.input = el;}} type="text" onFocus={this.onInputFocus}
                            onKeyDown={this.onKeydown} onBlur={this.onInputBlur}/>
                 </div>
-                <label className="ui-dropdown-label ui-inputtext ui-corner-all">{label}</label>
+                {editable}
+                {!this.props.editable && <label className="ui-dropdown-label ui-inputtext ui-corner-all">{label}</label>}
                 <div className="ui-dropdown-trigger ui-state-default ui-corner-right">
                     <span className="fa fa-fw fa-caret-down ui-c"></span>
                 </div>
diff --git a/src/showcase/dropdown/DropdownDemo.js b/src/showcase/dropdown/DropdownDemo.js
index 48bcff5520..4275adde5d 100644
--- a/src/showcase/dropdown/DropdownDemo.js
+++ b/src/showcase/dropdown/DropdownDemo.js
@@ -10,6 +10,7 @@ export class DropdownDemo extends Component {
         super();
         this.state = {};
         this.onCityChange = this.onCityChange.bind(this);
+        this.onCarChange = this.onCarChange.bind(this);
         this.onCarChange2 = this.onCarChange2.bind(this);
     }
 
@@ -17,6 +18,10 @@ export class DropdownDemo extends Component {
         this.setState({city: e.value});
     }
 
+    onCarChange(e) {
+        this.setState({car: e.value});
+    }
+
     onCarChange2(e) {
         this.setState({car2: e.value});
     }
@@ -73,6 +78,11 @@ export class DropdownDemo extends Component {
                     <Dropdown value={this.state.city} options={cities} onChange={this.onCityChange} style={{width:'150px'}}/>
                     <div style={{marginTop: '.5em'}}>{this.state.city ? 'Selected City: ' + this.state.city : 'No city selected'}</div>
 
+                    <h3>Editable</h3>
+                    <Dropdown value={this.state.car} options={cars} onChange={this.onCarChange}
+                              style={{width:'150px'}} editable={true} placeholder="Select a Brand"/>
+                    <div style={{marginTop: '.5em'}}>{this.state.car ? 'Selected Car: ' + this.state.car : 'No car selected'}</div>
+
                     <h3>Advanced</h3>
                     <Dropdown value={this.state.car2} options={cars} onChange={this.onCarChange2} itemTemplate={this.carTemplate} style={{width:'150px'}}
                               filter={true} filterPlaceholder="Select Car" filterBy="label,value"/>
@@ -283,6 +293,12 @@ render() {
                                     <td>null</td>
                                     <td>Placeholder text to show when filter input is empty.</td>
                                 </tr>
+                                <tr>
+                                    <td>editable</td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>When present, custom value instead of predefined options can be entered using the editable input field.</td>
+                                </tr>
                                 <tr>
                                     <td>placeholder</td>
                                     <td>string</td>
@@ -451,6 +467,10 @@ export class DropdownDemo extends Component {
                     <Dropdown value={this.state.city} options={cities} onChange={this.onCityChange} style={{width:'150px'}}/>
                     <div style={{marginTop: '.5em'}}>{this.state.city ? 'Selected City: ' + this.state.city : 'No city selected'}</div>
 
+                    <h3>Editable</h3>
+                    <Dropdown value={this.state.car} options={cars} onChange={this.onCarChange} style={{width:'150px'}} editable={true} placeholder="Select a Brand"/>
+                    <div style={{marginTop: '.5em'}}>{this.state.car ? 'Selected Car: ' + this.state.car : 'No car selected'}</div>
+
                     <h3>Advanced</h3>
                     <Dropdown value={this.state.car2} options={cars} onChange={this.onCarChange2} itemTemplate={this.carTemplate} style={{width:'150px'}} filter={true} filterPlaceholder="Select Car" filterBy="label,value"/>
                     <div style={{marginTop: '.5em'}}>{this.state.car2 ? 'Selected Car: ' + this.state.car2 : 'No car selected'}</div>