diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.test.ts b/packages/uui-color-swatch/lib/uui-color-swatch.test.ts
index 14a1710e7..fbb512d48 100644
--- a/packages/uui-color-swatch/lib/uui-color-swatch.test.ts
+++ b/packages/uui-color-swatch/lib/uui-color-swatch.test.ts
@@ -1,5 +1,6 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
 import { UUIColorSwatchElement } from './uui-color-swatch.element';
+import { sendMouse } from '@web/test-runner-commands';
 
 describe('UUIColorSwatchElement', () => {
   let element: UUIColorSwatchElement;
@@ -17,4 +18,42 @@ describe('UUIColorSwatchElement', () => {
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });
+
+  describe('selectable', () => {
+    beforeEach(async () => {
+      element.selectable = true;
+    });
+
+    it('can be selected when selectable', async () => {
+      await elementUpdated(element);
+      await sendMouse({
+        type: 'click',
+        position: [15, 15],
+        button: 'left',
+      });
+      expect(element.selected).to.be.true;
+    });
+
+    it('can not be selected when not selectable', async () => {
+      element.selectable = false;
+      await elementUpdated(element);
+      await sendMouse({
+        type: 'click',
+        position: [15, 15],
+        button: 'left',
+      });
+      expect(element.selected).to.be.false;
+    });
+
+    it('cant be selected when disabled', async () => {
+      element.disabled = true;
+      await elementUpdated(element);
+      await sendMouse({
+        type: 'click',
+        position: [15, 15],
+        button: 'left',
+      });
+      expect(element.selected).to.be.false;
+    });
+  });
 });