diff --git a/packages/field/src/InteractionStateMixin.js b/packages/field/src/InteractionStateMixin.js
index 4cec9a028..ea5322ace 100644
--- a/packages/field/src/InteractionStateMixin.js
+++ b/packages/field/src/InteractionStateMixin.js
@@ -1,5 +1,4 @@
 import { dedupeMixin } from '@lion/core';
-import { CssClassMixin } from '@lion/core/src/CssClassMixin.js';
 import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
 import { Unparseable } from '@lion/validate';
 
@@ -15,7 +14,7 @@ import { Unparseable } from '@lion/validate';
 export const InteractionStateMixin = dedupeMixin(
   superclass =>
     // eslint-disable-next-line no-unused-vars, no-shadow
-    class InteractionStateMixin extends CssClassMixin(ObserverMixin(superclass)) {
+    class InteractionStateMixin extends ObserverMixin(superclass) {
       static get properties() {
         return {
           ...super.properties,
@@ -24,7 +23,7 @@ export const InteractionStateMixin = dedupeMixin(
            */
           touched: {
             type: Boolean,
-            nonEmptyToClass: 'state-touched',
+            reflect: true,
           },
 
           /**
@@ -32,7 +31,7 @@ export const InteractionStateMixin = dedupeMixin(
            */
           dirty: {
             type: Boolean,
-            nonEmptyToClass: 'state-dirty',
+            reflect: true,
           },
 
           /**
@@ -101,6 +100,17 @@ export const InteractionStateMixin = dedupeMixin(
         this.removeEventListener(this._valueChangedEvent, this._iStateOnValueChange);
       }
 
+      updated(changedProperties) {
+        super.updated(changedProperties);
+        // classes are added only for backward compatibility - they are deprecated
+        if (changedProperties.has('touched')) {
+          this.classList[this.touched ? 'add' : 'remove']('state-touched');
+        }
+        if (changedProperties.has('dirty')) {
+          this.classList[this.dirty ? 'add' : 'remove']('state-dirty');
+        }
+      }
+
       /**
        * Evaluations performed on connectedCallback. Since some components can be out of sync
        * (due to interdependence on light children that can only be processed
diff --git a/packages/field/test/InteractionStateMixin.test.js b/packages/field/test/InteractionStateMixin.test.js
index ceed2d27d..8636bdc95 100644
--- a/packages/field/test/InteractionStateMixin.test.js
+++ b/packages/field/test/InteractionStateMixin.test.js
@@ -59,6 +59,7 @@ describe('InteractionStateMixin', async () => {
     expect(el.touched).to.be.true;
   });
 
+  // classes are added only for backward compatibility - they are deprecated
   it('sets a class "state-(touched|dirty)"', async () => {
     const el = await fixture(html`<${tag}></${tag}>`);
     el.touched = true;
@@ -70,6 +71,20 @@ describe('InteractionStateMixin', async () => {
     expect(el.classList.contains('state-dirty')).to.equal(true, 'has class "state-dirty"');
   });
 
+  it('sets an attribute "touched', async () => {
+    const el = await fixture(html`<${tag}></${tag}>`);
+    el.touched = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('touched')).to.be.true;
+  });
+
+  it('sets an attribute "dirty', async () => {
+    const el = await fixture(html`<${tag}></${tag}>`);
+    el.dirty = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('dirty')).to.be.true;
+  });
+
   it('fires "(touched|dirty)-state-changed" event when state changes', async () => {
     const touchedSpy = sinon.spy();
     const dirtySpy = sinon.spy();