diff --git a/package-lock.json b/package-lock.json
index ae89fdf..397af3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@gisce/ooui",
-  "version": "0.17.12",
+  "version": "0.17.13",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gisce/ooui",
-      "version": "0.17.12",
+      "version": "0.17.13",
       "dependencies": {
         "html-entities": "^2.3.3",
         "moment": "^2.29.3"
diff --git a/package.json b/package.json
index 6e45b57..f089070 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gisce/ooui",
-  "version": "0.17.12",
+  "version": "0.17.13",
   "main": "./dist/ooui.umd.js",
   "module": "./dist/ooui.es.js",
   "types": "./dist/index.d.ts",
diff --git a/src/Tag.ts b/src/Tag.ts
new file mode 100644
index 0000000..1d52166
--- /dev/null
+++ b/src/Tag.ts
@@ -0,0 +1,12 @@
+import Selection from "./Selection";
+
+/**
+ * A Tag widget
+ */
+class Tag extends Selection {
+  get colors(): any | "auto" {
+    return this._parsedWidgetProps.colors || {};
+  }
+}
+
+export default Tag;
diff --git a/src/WidgetFactory.ts b/src/WidgetFactory.ts
index 002ceaf..c6f1662 100644
--- a/src/WidgetFactory.ts
+++ b/src/WidgetFactory.ts
@@ -27,6 +27,7 @@ import FiberGrid from "./FiberGrid";
 import Timeline from "./Timeline";
 import Indicator from "./Indicator";
 import Tags from "./Tags";
+import Tag from "./Tag";
 import Radio from "./Radio";
 import MultiCheckbox from "./MultiCheckbox";
 import Switch from "./Switch";
@@ -132,6 +133,9 @@ class WidgetFactory {
       case "tags":
         this._widgetClass = Tags;
         break;
+      case "tag":
+        this._widgetClass = Tag;
+        break;
       case "radio":
         this._widgetClass = Radio;
         break;
diff --git a/src/index.ts b/src/index.ts
index 4dfc106..32ee2c4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -36,6 +36,7 @@ import Indicator from "./Indicator";
 import Dashboard from "./Dashboard";
 import DashboardItem from "./DashboardItem";
 import Tags from "./Tags";
+import Tag from "./Tag";
 import MultiCheckbox from "./MultiCheckbox";
 import Radio from "./Radio";
 import Switch from "./Switch";
@@ -109,6 +110,7 @@ export {
   graphProcessor,
   graphFieldUtils,
   Tags,
+  Tag,
   MultiCheckbox,
   Radio,
   Switch,
diff --git a/src/spec/Tag.spec.ts b/src/spec/Tag.spec.ts
new file mode 100644
index 0000000..b0a4757
--- /dev/null
+++ b/src/spec/Tag.spec.ts
@@ -0,0 +1,46 @@
+import WidgetFactory from "../WidgetFactory";
+
+describe("A Tag widget", () => {
+  it("should have an id corresponding to field name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "status",
+    };
+
+    const widget = widgetFactory.createWidget("tag", props);
+
+    expect(widget.id).toBe("status");
+  });
+
+  describe("colors property", () => {
+    it("should have default colors to empty object", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "status",
+      };
+      const widget = widgetFactory.createWidget("tag", props);
+
+      expect(widget.colors).toStrictEqual({});
+    });
+    it("should parse colors property", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "status",
+        widget_props: '{"colors": {"draft": "blue", "open": "red"}}',
+      };
+      const widget = widgetFactory.createWidget("tag", props);
+
+      expect(widget.colors).toStrictEqual({draft: 'blue', open: 'red'});
+    });
+    it("should parse colors property and can be an string 'auto'", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "status",
+        widget_props: '{"colors": "auto"}',
+      };
+      const widget = widgetFactory.createWidget("tag", props);
+
+      expect(widget.colors).toStrictEqual("auto");
+    });
+  });
+});