diff --git a/packages/devextreme-vue/src/core/__tests__/textbox.test.ts b/packages/devextreme-vue/src/core/__tests__/textbox.test.ts
index 29a3885f9b56..bb60c478f8ac 100644
--- a/packages/devextreme-vue/src/core/__tests__/textbox.test.ts
+++ b/packages/devextreme-vue/src/core/__tests__/textbox.test.ts
@@ -82,4 +82,28 @@ describe('two-way binding', () => {
       expect(component.element.classList.toString()).toBe('custom2 dx-show-invalid-badge dx-textbox dx-texteditor dx-editor-outlined dx-texteditor-empty dx-widget');
     });
   });
+
+  it('dxClass should be set when class attr is undefined', async () => {
+    expect.assertions(1);
+    const vm = defineComponent({
+      template:
+                `<dx-text-box id="component" :class="{custom: customClass}"></dx-text-box>
+                `,
+      components: {
+        DxTextBox,
+      },
+      props: {
+        customClass: {
+          type: String,
+          default: true,
+        },
+      },
+    });
+    const wrapper = mount(vm);
+    const component = wrapper.getComponent('#component');
+    await wrapper.setProps({ customClass: false });
+    await nextTick(() => {
+      expect(component.element.classList.toString()).toBe(' dx-show-invalid-badge dx-textbox dx-texteditor dx-editor-outlined dx-texteditor-empty dx-widget');
+    });
+  });
 });
diff --git a/packages/devextreme-vue/src/core/component.ts b/packages/devextreme-vue/src/core/component.ts
index de579a29874a..f09aec6d430b 100644
--- a/packages/devextreme-vue/src/core/component.ts
+++ b/packages/devextreme-vue/src/core/component.ts
@@ -54,7 +54,7 @@ function getAttrs(attrs, dxClasses: string[]) {
   const attributes = {};
   includeAttrs.forEach((attr) => {
     const attrValue = attrs[attr];
-    if (attrValue) {
+    if (attrValue !== undefined && attrValue !== null) {
       attributes[attr] = attr === 'class' && dxClasses.length ? `${attrValue} ${dxClasses.join(' ')}` : attrValue;
     }
   });