diff --git a/app/assets/javascripts/discourse/templates/groups/index.hbs b/app/assets/javascripts/discourse/templates/groups/index.hbs
index 9805db78c5..a8b3c98d2f 100644
--- a/app/assets/javascripts/discourse/templates/groups/index.hbs
+++ b/app/assets/javascripts/discourse/templates/groups/index.hbs
@@ -16,7 +16,7 @@
                   content=types
                   clearable=true
                   allowAutoSelectFirst=false
-                  placeholder="groups.index.filter"
+                  noneLabel="groups.index.filter"
                   class="groups-header-filters-type"}}
     </div>
   </div>
diff --git a/app/assets/javascripts/select-kit/components/combo-box.js.es6 b/app/assets/javascripts/select-kit/components/combo-box.js.es6
index 4f22916d50..4e6e42a02b 100644
--- a/app/assets/javascripts/select-kit/components/combo-box.js.es6
+++ b/app/assets/javascripts/select-kit/components/combo-box.js.es6
@@ -24,11 +24,8 @@ export default SingleSelectComponent.extend({
 
   @on("didReceiveAttrs")
   _setComboBoxOptions() {
-    const placeholder = this.get('placeholder');
-
     this.get("headerComponentOptions").setProperties({
-      clearable: this.get("clearable"),
-      placeholder: placeholder ? I18n.t(placeholder) : "",
+      clearable: this.get("clearable")
     });
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/combo-box/combo-box-header.js.es6 b/app/assets/javascripts/select-kit/components/combo-box/combo-box-header.js.es6
index 3777d6caa9..3835dc01cb 100644
--- a/app/assets/javascripts/select-kit/components/combo-box/combo-box-header.js.es6
+++ b/app/assets/javascripts/select-kit/components/combo-box/combo-box-header.js.es6
@@ -7,6 +7,5 @@ export default SelectKitHeaderComponent.extend({
   clearable: Ember.computed.alias("options.clearable"),
   caretUpIcon: Ember.computed.alias("options.caretUpIcon"),
   caretDownIcon: Ember.computed.alias("options.caretDownIcon"),
-  shouldDisplayClearableButton: Ember.computed.and("clearable", "computedContent.hasSelection"),
-  placeholder: Ember.computed.alias("options.placeholder"),
+  shouldDisplayClearableButton: Ember.computed.and("clearable", "computedContent.hasSelection")
 });
diff --git a/app/assets/javascripts/select-kit/components/select-kit.js.es6 b/app/assets/javascripts/select-kit/components/select-kit.js.es6
index 9054fa50fc..eab8ccb731 100644
--- a/app/assets/javascripts/select-kit/components/select-kit.js.es6
+++ b/app/assets/javascripts/select-kit/components/select-kit.js.es6
@@ -262,7 +262,8 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
 
   @computed("none")
   noneRowComputedContent(none) {
-    if (isNone(none)) { return null; }
+    if (isNone(none)) return null;
+
     let noneRowComputedContent;
 
     switch (typeof none) {
diff --git a/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6
index 75e3eab0b1..d719c1ca66 100644
--- a/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6
+++ b/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6
@@ -4,7 +4,7 @@ const { isEmpty, makeArray } = Ember;
 export default Ember.Component.extend({
   layoutName: "select-kit/templates/components/select-kit/select-kit-header",
   classNames: ["select-kit-header"],
-  classNameBindings: ["isFocused"],
+  classNameBindings: ["isFocused", "isNone"],
   attributeBindings: [
     "tabindex",
     "ariaLabel:aria-label",
@@ -14,6 +14,8 @@ export default Ember.Component.extend({
     "name:data-name",
   ],
 
+  isNone: Ember.computed.none("computedContent.value"),
+
   ariaHasPopup: true,
 
   ariaLabel: Ember.computed.or("computedContent.ariaLabel", "title"),
diff --git a/app/assets/javascripts/select-kit/components/single-select.js.es6 b/app/assets/javascripts/select-kit/components/single-select.js.es6
index ca6878d813..204ff3349c 100644
--- a/app/assets/javascripts/select-kit/components/single-select.js.es6
+++ b/app/assets/javascripts/select-kit/components/single-select.js.es6
@@ -84,12 +84,18 @@ export default SelectKitComponent.extend({
   },
 
   computeHeaderContent() {
-    return {
+    let content = {
       title: this.get("title"),
       icons: makeArray(this.getWithDefault("headerIcon", [])),
       value: this.get("selection.value"),
       name: this.get("selection.name") || this.get("noneRowComputedContent.name")
     };
+
+    if (!this.get("hasSelection") && this.get("noneLabel")) {
+      content.title = content.name = I18n.t(this.get("noneLabel"));
+    }
+
+    return content;
   },
 
   @computed("computedAsyncContent.[]", "computedValue")
diff --git a/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs b/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs
index 7a4f405595..c3a7aa14fb 100644
--- a/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs
@@ -1,14 +1,8 @@
 {{#each icons as |icon|}} {{d-icon icon}} {{/each}}
 
-{{#if label}}
-  <span class="selected-name">
-    {{{label}}}
-  </span>
-{{else}}
-  <span class="combo-box-placeholder">
-    {{placeholder}}
-  </span>
-{{/if}}
+<span class="selected-name">
+  {{{label}}}
+</span>
 
 {{#if shouldDisplayClearableButton}}
   <button class="btn-clear" {{action onClearSelection bubbles=false}}>
diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss
index 52136d1b80..dd6a2e9859 100644
--- a/app/assets/stylesheets/common/select-kit/combo-box.scss
+++ b/app/assets/stylesheets/common/select-kit/combo-box.scss
@@ -1,9 +1,5 @@
 .select-kit {
   &.combo-box {
-    .combo-box-placeholder {
-      color: dark-light-choose($primary-high, $secondary-low);
-    }
-
     .select-kit-body {
       width: 100%;
     }
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 3f61e5e260..4d43328f84 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -104,6 +104,12 @@
       color: inherit;
     }
 
+    &.is-none {
+      .selected-name {
+        color: dark-light-choose($primary-high, $secondary-low);
+      }
+    }
+
     .btn-clear {
       padding: 0 10px;
       border: 0;
diff --git a/test/javascripts/components/combo-box-test.js.es6 b/test/javascripts/components/combo-box-test.js.es6
index e1237ccc3f..45af48de9a 100644
--- a/test/javascripts/components/combo-box-test.js.es6
+++ b/test/javascripts/components/combo-box-test.js.es6
@@ -192,3 +192,20 @@ componentTest('with empty string as value', {
     });
   }
 });
+
+componentTest('with noneLabel', {
+  template: '{{combo-box content=items allowAutoSelectFirst=false noneLabel=noneLabel}}',
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = {none: 'none'};
+    this.set('items', ['evil', 'trout', 'hat']);
+    this.set('noneLabel', 'test.none');
+  },
+
+  test(assert) {
+    this.get('subject').expand();
+
+    andThen(() => {
+      assert.equal(this.get('subject').header().name(), 'none', 'it displays noneLabel as the header name');
+    });
+  }
+});