diff --git a/docs/plugins.md b/docs/plugins.md
index 103398187..e9b16e977 100644
--- a/docs/plugins.md
+++ b/docs/plugins.md
@@ -13,7 +13,7 @@ complete control.
- All plugins live in their own folders in ["src/plugins"](../src/plugins).
- Plugin names should be in follow the format: `/[a-z_]+$`
- JS source should live in a "plugin.js" file (required).
-- CSS should live in a "plugin.less" file (optional). It will be bundled at build time.
+- CSS should live in a "plugin.less" and "plugin.scss" file (optional) if use SCSS file, include it into `src/scss/selectize.scss`. It will be bundled at build time.
- Plugins are initialized right before the control is setup.
This means that if you want to listen for events on any of the control's
elements, you should override the `setup()` method (see ["DOM Events"](#dom-events)).
diff --git a/examples/plugins.html b/examples/plugins.html
index 79bb5aa4b..d7190aebe 100644
--- a/examples/plugins.html
+++ b/examples/plugins.html
@@ -21,6 +21,29 @@
Selectize.js
+
+
Plugin: "clear_button"
+
+
+
+
+
+
+
+
+
+
+
Plugin: "remove_button"
diff --git a/src/plugins/clear_button/plugin.js b/src/plugins/clear_button/plugin.js
new file mode 100644
index 000000000..da3478eba
--- /dev/null
+++ b/src/plugins/clear_button/plugin.js
@@ -0,0 +1,69 @@
+/**
+ * Plugin: "clear_button" (selectize.js)
+ * Copyright (c) 2013 Brian Reavis & contributors
+ * Copyright (c) 2020-2022 Selectize Team & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ * @author Fabien Winkler
+ */
+
+Selectize.define("clear_button", function (options) {
+ var self = this;
+
+ options = $.extend(
+ {
+ title: "Clear",
+ className: "clear",
+ label: "×",
+ html: function (data) {
+ return (
+ ' ' + data.label + ''
+ );
+ },
+ },
+ options
+ );
+
+ self.setup = (function () {
+ var original = self.setup;
+ return function () {
+ original.apply(self, arguments);
+ self.$button_clear = $(options.html(options));
+
+ if (self.settings.mode === "single") self.$wrapper.addClass("single");
+
+ self.$wrapper.append(self.$button_clear);
+
+ if (self.getValue() === "" || self.getValue().length === 0) {
+ self.$wrapper.find("." + options.className).css("display", "none");
+ }
+
+ self.on("change", function () {
+ if (self.getValue() !== "" || self.getValue().length === 0) {
+ self.$wrapper.find("." + options.className).css("display", "");
+ } else {
+ self.$wrapper.find("." + options.className).css("display", "none");
+ }
+ });
+
+ self.$wrapper.on("click", "." + options.className, function (e) {
+ e.preventDefault();
+ e.stopImmediatePropagation();
+ e.stopPropagation();
+
+ if (self.isLocked) return;
+
+ self.clear();
+ self.$wrapper.find("." + options.className).css("display", "none");
+ });
+ };
+ })();
+});
diff --git a/src/plugins/clear_button/plugin.less b/src/plugins/clear_button/plugin.less
new file mode 100644
index 000000000..716f7fe5c
--- /dev/null
+++ b/src/plugins/clear_button/plugin.less
@@ -0,0 +1,28 @@
+.selectize-control.plugin-clear_button {
+ .clear {
+ display: flex;
+ position: absolute;
+ height: 100%;
+ width: 25px;
+ top: 0;
+ right: calc(@selectize-padding-x - @selectize-padding-item-x);
+ color: rgba(0, 0, 0);
+ opacity: 0.4;
+ font-weight: bold;
+ border: none;
+ cursor: pointer;
+ z-index: 1;
+ font-size: 21px;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .clear:hover {
+ opacity: 1;
+ }
+
+ &.single .clear {
+ right: calc(@selectize-padding-x - @selectize-padding-item-x + 1.5rem);
+ }
+
+}
diff --git a/src/plugins/clear_button/plugin.scss b/src/plugins/clear_button/plugin.scss
new file mode 100644
index 000000000..30bfdc9f9
--- /dev/null
+++ b/src/plugins/clear_button/plugin.scss
@@ -0,0 +1,28 @@
+.#{$selectize}-control.plugin-clear_button {
+ .clear {
+ display: flex;
+ position: absolute;
+ height: 100%;
+ width: 25px;
+ top: 0;
+ right: calc(#{$select-padding-x} - #{$select-padding-item-x});
+ color: rgba(0, 0, 0);
+ opacity: 0.4;
+ font-weight: bold;
+ border: none;
+ cursor: pointer;
+ z-index: 1;
+ font-size: 21px;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .clear:hover {
+ opacity: 1;
+ }
+
+ &.single .clear {
+ right: calc(#{$select-padding-x} - #{$select-padding-item-x} + 1.5rem);
+ }
+
+}
\ No newline at end of file
diff --git a/src/scss/selectize.scss b/src/scss/selectize.scss
index 45d69e4ee..39e27277f 100644
--- a/src/scss/selectize.scss
+++ b/src/scss/selectize.scss
@@ -94,6 +94,7 @@ $select-spinner-border-color: $select-color-border;
@import "../plugins/dropdown_header/plugin.scss";
@import "../plugins/optgroup_columns/plugin.scss";
@import "../plugins/remove_button/plugin.scss";
+@import "../plugins/clear_button/plugin.scss";
.#{$selectize}-control {
position: relative;