diff --git a/libs/components/src/form-field/form-field.component.ts b/libs/components/src/form-field/form-field.component.ts
index 9553641188e..6fcb4090ddd 100644
--- a/libs/components/src/form-field/form-field.component.ts
+++ b/libs/components/src/form-field/form-field.component.ts
@@ -1,8 +1,11 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import {
   AfterContentChecked,
   Component,
   ContentChild,
   ContentChildren,
+  HostBinding,
+  Input,
   QueryList,
   ViewChild,
 } from "@angular/core";
@@ -17,9 +20,6 @@ import { BitSuffixDirective } from "./suffix.directive";
 @Component({
   selector: "bit-form-field",
   templateUrl: "./form-field.component.html",
-  host: {
-    class: "tw-mb-6 tw-block",
-  },
 })
 export class BitFormFieldComponent implements AfterContentChecked {
   @ContentChild(BitFormFieldControl) input: BitFormFieldControl;
@@ -30,6 +30,19 @@ export class BitFormFieldComponent implements AfterContentChecked {
   @ContentChildren(BitPrefixDirective) prefixChildren: QueryList<BitPrefixDirective>;
   @ContentChildren(BitSuffixDirective) suffixChildren: QueryList<BitSuffixDirective>;
 
+  private _disableMargin = false;
+  @Input() set disableMargin(value: boolean | "") {
+    this._disableMargin = coerceBooleanProperty(value);
+  }
+  get disableMargin() {
+    return this._disableMargin;
+  }
+
+  @HostBinding("class")
+  get classList() {
+    return ["tw-block"].concat(this.disableMargin ? [] : ["tw-mb-6"]);
+  }
+
   ngAfterContentChecked(): void {
     if (this.error) {
       this.input.ariaDescribedBy = this.error.id;