diff --git a/docs/advanced-customization/custom-templates.md b/docs/advanced-customization/custom-templates.md
index 5eabf6a5ee..bd91607a79 100644
--- a/docs/advanced-customization/custom-templates.md
+++ b/docs/advanced-customization/custom-templates.md
@@ -219,5 +219,6 @@ The following props are part of each element in `properties`:
 - `name`: A string representing the property name.
 - `disabled`: A boolean value stating if the object property is disabled.
 - `readonly`: A boolean value stating if the property is read-only.
+- `hidden`: A boolean value stating if the property should be hidden.
 
 > Note: Array and object field templates are always rendered inside of the FieldTemplate. To fully customize an object field template, you may need to specify both `ui:FieldTemplate` and `ui:ObjectFieldTemplate`.
diff --git a/packages/antd/src/templates/ObjectFieldTemplate/index.js b/packages/antd/src/templates/ObjectFieldTemplate/index.js
index c558435969..4652f18461 100644
--- a/packages/antd/src/templates/ObjectFieldTemplate/index.js
+++ b/packages/antd/src/templates/ObjectFieldTemplate/index.js
@@ -75,9 +75,6 @@ const ObjectFieldTemplate = ({
     return defaultColSpan;
   };
 
-  const filterHidden = (element) =>
-    element.content.props.uiSchema['ui:widget'] !== 'hidden';
-
   return (
     <fieldset id={idSchema.$id}>
       <Row gutter={rowGutter}>
@@ -99,7 +96,7 @@ const ObjectFieldTemplate = ({
               />
             </Col>
           )}
-        {properties.filter(filterHidden).map((element) => (
+        {properties.filter((e) => !e.hidden).map((element) => (
           <Col key={element.name} span={calculateColSpan(element)}>
             {element.content}
           </Col>
diff --git a/packages/antd/test/Form.test.js b/packages/antd/test/Form.test.js
index 2e57ce61ef..d408c9710d 100644
--- a/packages/antd/test/Form.test.js
+++ b/packages/antd/test/Form.test.js
@@ -78,4 +78,23 @@ describe("single fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  test("hidden field", () => {
+    const schema = {
+      type: "object",
+      properties: {
+        "my-field": {
+          type: "string",
+        },
+      },
+    };
+    const uiSchema = {
+      "my-field": {
+        "ui:widget": "hidden",
+      },
+    };
+    const tree = renderer
+      .create(<Form schema={schema} uiSchema={uiSchema} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/packages/antd/test/__snapshots__/Form.test.js.snap b/packages/antd/test/__snapshots__/Form.test.js.snap
index 155f4967db..057c23adab 100644
--- a/packages/antd/test/__snapshots__/Form.test.js.snap
+++ b/packages/antd/test/__snapshots__/Form.test.js.snap
@@ -1,5 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`single fields hidden field 1`] = `
+<form
+  className="rjsf"
+  noValidate={false}
+  onSubmit={[Function]}
+>
+  <div
+    className="form-group field field-object"
+  >
+    <fieldset
+      id="root"
+    >
+      <div
+        className="ant-row"
+        style={
+          Object {
+            "marginLeft": -12,
+            "marginRight": -12,
+          }
+        }
+      />
+    </fieldset>
+  </div>
+  <div>
+    <button
+      className="btn btn-info"
+      type="submit"
+    >
+      Submit
+    </button>
+  </div>
+</form>
+`;
+
 exports[`single fields null field 1`] = `
 <form
   className="rjsf"
diff --git a/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
index 0a3106bc41..de98a8764f 100644
--- a/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
+++ b/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
@@ -33,7 +33,10 @@ const ObjectFieldTemplate = ({
       )}
       <Container fluid className="p-0">
         {properties.map((element: any, index: number) => (
-          <Row key={index} style={{ marginBottom: "10px" }}>
+          <Row
+            key={index}
+            style={{ marginBottom: "10px" }}
+            className={element.hidden ? "d-none" : undefined}>
             <Col xs={12}> {element.content}</Col>
           </Row>
         ))}
diff --git a/packages/bootstrap-4/test/Form.test.tsx b/packages/bootstrap-4/test/Form.test.tsx
index 7fb76f4841..4d3247fbcd 100644
--- a/packages/bootstrap-4/test/Form.test.tsx
+++ b/packages/bootstrap-4/test/Form.test.tsx
@@ -197,4 +197,23 @@ describe("single fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  test("hidden field", () => {
+    const schema: JSONSchema7 = {
+      type: "object",
+      properties: {
+        "my-field": {
+          type: "string",
+        },
+      },
+    };
+    const uiSchema: UiSchema = {
+      "my-field": {
+        "ui:widget": "hidden",
+      },
+    };
+    const tree = renderer
+      .create(<Form schema={schema} uiSchema={uiSchema} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/packages/bootstrap-4/test/__snapshots__/Form.test.tsx.snap b/packages/bootstrap-4/test/__snapshots__/Form.test.tsx.snap
index ec2606e00b..abb92593dd 100644
--- a/packages/bootstrap-4/test/__snapshots__/Form.test.tsx.snap
+++ b/packages/bootstrap-4/test/__snapshots__/Form.test.tsx.snap
@@ -346,6 +346,55 @@ exports[`single fields format datetime 1`] = `
 </form>
 `;
 
+exports[`single fields hidden field 1`] = `
+<form
+  className="rjsf"
+  noValidate={false}
+  onSubmit={[Function]}
+>
+  <div
+    className="form-group"
+  >
+    <div
+      className="p-0 container-fluid"
+    >
+      <div
+        className="d-none row"
+        style={
+          Object {
+            "marginBottom": "10px",
+          }
+        }
+      >
+        <div
+          className="col-12"
+        >
+           
+          <div
+            className="form-group"
+          >
+            <input
+              id="root_my-field"
+              type="hidden"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <button
+      className="btn btn-primary"
+      disabled={false}
+      type="submit"
+    >
+      Submit
+    </button>
+  </div>
+</form>
+`;
+
 exports[`single fields null field 1`] = `
 <form
   className="rjsf"
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
index a1f97349be..17f2f01875 100644
--- a/packages/core/index.d.ts
+++ b/packages/core/index.d.ts
@@ -215,6 +215,7 @@ declare module '@rjsf/core' {
             name: string;
             disabled: boolean;
             readonly: boolean;
+            hidden: boolean;
         }[];
         onAddClick: (schema: JSONSchema7) => () => void;
         readonly: boolean;
diff --git a/packages/core/src/components/fields/ObjectField.js b/packages/core/src/components/fields/ObjectField.js
index 09de06e318..fa80926c45 100644
--- a/packages/core/src/components/fields/ObjectField.js
+++ b/packages/core/src/components/fields/ObjectField.js
@@ -229,6 +229,11 @@ class ObjectField extends Component {
         const addedByAdditionalProperties = schema.properties[
           name
         ].hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
+        const fieldUiSchema = addedByAdditionalProperties
+          ? uiSchema.additionalProperties
+          : uiSchema[name];
+        const hidden = fieldUiSchema && fieldUiSchema["ui:widget"] === "hidden";
+
         return {
           content: (
             <SchemaField
@@ -236,11 +241,7 @@ class ObjectField extends Component {
               name={name}
               required={this.isRequired(name)}
               schema={schema.properties[name]}
-              uiSchema={
-                addedByAdditionalProperties
-                  ? uiSchema.additionalProperties
-                  : uiSchema[name]
-              }
+              uiSchema={fieldUiSchema}
               errorSchema={errorSchema[name]}
               idSchema={idSchema[name]}
               idPrefix={idPrefix}
@@ -263,6 +264,7 @@ class ObjectField extends Component {
           readonly,
           disabled,
           required,
+          hidden,
         };
       }),
       readonly,
diff --git a/packages/fluent-ui/src/FieldTemplate/FieldTemplate.tsx b/packages/fluent-ui/src/FieldTemplate/FieldTemplate.tsx
index f746500aef..ed0264a7e8 100644
--- a/packages/fluent-ui/src/FieldTemplate/FieldTemplate.tsx
+++ b/packages/fluent-ui/src/FieldTemplate/FieldTemplate.tsx
@@ -20,12 +20,15 @@ const FieldTemplate = ({
   rawDescription,
   classNames,
   label,
-  required
+  required,
+  hidden,
 }: FieldTemplateProps) => {
   // TODO: do this better by not returning the form-group class from master.
   classNames = "ms-Grid-col ms-sm12 " + classNames.replace("form-group", "");
   return (
-    <div className={classNames} style={{marginBottom: 15}}>
+    <div
+      className={classNames}
+      style={{ marginBottom: 15, display: hidden ? "none" : undefined }}>
       {children}
       {/* {displayLabel && <Label>
         {label}
diff --git a/packages/fluent-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/fluent-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
index 3b7f9bda38..f5758e8069 100644
--- a/packages/fluent-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
+++ b/packages/fluent-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
@@ -29,7 +29,7 @@ const ObjectFieldTemplate = ({
 
       <div className="ms-Grid" dir="ltr">
         <div className="ms-Grid-row">
-          {properties.map((element: any) => element.content)}
+          {properties.map((element) => element.content)}
         </div>
       </div>
     </>
diff --git a/packages/fluent-ui/test/Form.test.tsx b/packages/fluent-ui/test/Form.test.tsx
index 08157ff539..779c36ba2a 100644
--- a/packages/fluent-ui/test/Form.test.tsx
+++ b/packages/fluent-ui/test/Form.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Form from "../src/index";
 import { JSONSchema7 } from "json-schema";
 import renderer from "react-test-renderer";
+import { UiSchema } from '@rjsf/core';
 
 describe("single fields", () => {
   describe("string field", () => {
@@ -72,4 +73,23 @@ describe("single fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
-});
\ No newline at end of file
+  test("hidden field", () => {
+    const schema: JSONSchema7 = {
+      type: "object",
+      properties: {
+        "my-field": {
+          type: "string",
+        },
+      },
+    };
+    const uiSchema: UiSchema = {
+      "my-field": {
+        "ui:widget": "hidden",
+      },
+    };
+    const tree = renderer
+      .create(<Form schema={schema} uiSchema={uiSchema} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/packages/fluent-ui/test/__snapshots__/Array.test.tsx.snap b/packages/fluent-ui/test/__snapshots__/Array.test.tsx.snap
index cc3c1d4902..d2c164a236 100644
--- a/packages/fluent-ui/test/__snapshots__/Array.test.tsx.snap
+++ b/packages/fluent-ui/test/__snapshots__/Array.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`array fields array 1`] = `
     className="ms-Grid-col ms-sm12  field field-array"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
@@ -115,6 +116,7 @@ exports[`array fields checkboxes 1`] = `
     className="ms-Grid-col ms-sm12  field field-array"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
@@ -211,6 +213,7 @@ exports[`array fields fixed array 1`] = `
     className="ms-Grid-col ms-sm12  field field-array"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
@@ -232,6 +235,7 @@ exports[`array fields fixed array 1`] = `
               className="ms-Grid-col ms-sm12  field field-string"
               style={
                 Object {
+                  "display": undefined,
                   "marginBottom": 15,
                 }
               }
@@ -389,6 +393,7 @@ exports[`array fields fixed array 1`] = `
               className="ms-Grid-col ms-sm12  field field-number"
               style={
                 Object {
+                  "display": undefined,
                   "marginBottom": 15,
                 }
               }
diff --git a/packages/fluent-ui/test/__snapshots__/Form.test.tsx.snap b/packages/fluent-ui/test/__snapshots__/Form.test.tsx.snap
index a7e0e65ac7..d52ab3e749 100644
--- a/packages/fluent-ui/test/__snapshots__/Form.test.tsx.snap
+++ b/packages/fluent-ui/test/__snapshots__/Form.test.tsx.snap
@@ -1,5 +1,82 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`single fields hidden field 1`] = `
+<form
+  className="rjsf"
+  noValidate={false}
+  onSubmit={[Function]}
+>
+  <div
+    className="ms-Grid-col ms-sm12  field field-object"
+    style={
+      Object {
+        "display": undefined,
+        "marginBottom": 15,
+      }
+    }
+  >
+    <div
+      className="ms-Grid"
+      dir="ltr"
+    >
+      <div
+        className="ms-Grid-row"
+      >
+        <div
+          className="ms-Grid-col ms-sm12  field field-string"
+          style={
+            Object {
+              "display": "none",
+              "marginBottom": 15,
+            }
+          }
+        >
+          <input
+            id="root_my-field"
+            type="hidden"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <br />
+    <div
+      className="ms-Grid-col ms-sm12"
+    >
+      <button
+        className="ms-Button ms-Button--primary root-50"
+        data-is-focusable={true}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onKeyPress={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        type="submit"
+      >
+        <span
+          className="ms-Button-flexContainer flexContainer-51"
+          data-automationid="splitbuttonprimary"
+        >
+          <span
+            className="ms-Button-textContainer textContainer-52"
+          >
+            <span
+              className="ms-Button-label label-54"
+              id="id__34"
+            >
+              Submit
+            </span>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`single fields null field 1`] = `
 <form
   className="rjsf"
@@ -10,6 +87,7 @@ exports[`single fields null field 1`] = `
     className="ms-Grid-col ms-sm12  field field-null"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
@@ -61,6 +139,7 @@ exports[`single fields number field 1`] = `
     className="ms-Grid-col ms-sm12  field field-number"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
@@ -140,6 +219,7 @@ exports[`single fields string field format data-url 1`] = `
     className="ms-Grid-col ms-sm12  field field-string"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
@@ -204,6 +284,7 @@ exports[`single fields string field format email 1`] = `
     className="ms-Grid-col ms-sm12  field field-string"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
@@ -283,6 +364,7 @@ exports[`single fields string field format uri 1`] = `
     className="ms-Grid-col ms-sm12  field field-string"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
@@ -362,6 +444,7 @@ exports[`single fields string field regular 1`] = `
     className="ms-Grid-col ms-sm12  field field-string"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
@@ -441,6 +524,7 @@ exports[`single fields unsupported field 1`] = `
     className="ms-Grid-col ms-sm12  field field-undefined"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
diff --git a/packages/fluent-ui/test/__snapshots__/Object.test.tsx.snap b/packages/fluent-ui/test/__snapshots__/Object.test.tsx.snap
index a4866132f4..ca363ec08d 100644
--- a/packages/fluent-ui/test/__snapshots__/Object.test.tsx.snap
+++ b/packages/fluent-ui/test/__snapshots__/Object.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`object fields object 1`] = `
     className="ms-Grid-col ms-sm12  field field-object"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
@@ -25,6 +26,7 @@ exports[`object fields object 1`] = `
           className="ms-Grid-col ms-sm12  field field-string"
           style={
             Object {
+              "display": undefined,
               "marginBottom": 15,
             }
           }
@@ -70,6 +72,7 @@ exports[`object fields object 1`] = `
           className="ms-Grid-col ms-sm12  field field-number"
           style={
             Object {
+              "display": undefined,
               "marginBottom": 15,
             }
           }
diff --git a/packages/material-ui/src/FieldTemplate/FieldTemplate.tsx b/packages/material-ui/src/FieldTemplate/FieldTemplate.tsx
index 5a1bfa3732..6ad3231758 100644
--- a/packages/material-ui/src/FieldTemplate/FieldTemplate.tsx
+++ b/packages/material-ui/src/FieldTemplate/FieldTemplate.tsx
@@ -16,6 +16,7 @@ const FieldTemplate = ({
   classNames,
   disabled,
   displayLabel,
+  hidden,
   label,
   onDropPropertyClick,
   onKeyChange,
@@ -26,6 +27,10 @@ const FieldTemplate = ({
   rawDescription,
   schema,
 }: FieldTemplateProps) => {
+  if (hidden) {
+    return children;
+  }
+
   return (
     <WrapIfAdditional
       classNames={classNames}
diff --git a/packages/material-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/material-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
index 50688b8f20..abcff8f139 100644
--- a/packages/material-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
+++ b/packages/material-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
@@ -49,16 +49,21 @@ const ObjectFieldTemplate = ({
         />
       )}
       <Grid container={true} spacing={2} className={classes.root}>
-        {properties.map((element: any, index: number) => (
-          <Grid
-            item={true}
-            xs={12}
-            key={index}
-            style={{ marginBottom: '10px' }}
-          >
-            {element.content}
-          </Grid>
-        ))}
+        {properties.map((element, index) =>
+          // Remove the <Grid> if the inner element is hidden as the <Grid>
+          // itself would otherwise still take up space.
+          element.hidden ? (
+            element.content
+          ) : (
+            <Grid
+              item={true}
+              xs={12}
+              key={index}
+              style={{ marginBottom: "10px" }}>
+              {element.content}
+            </Grid>
+          )
+        )}
         {canExpand(schema, uiSchema, formData) && (
           <Grid container justify='flex-end'>
             <Grid item={true}>
diff --git a/packages/material-ui/test/Form.test.tsx b/packages/material-ui/test/Form.test.tsx
index 39362a0365..e6590eb19e 100644
--- a/packages/material-ui/test/Form.test.tsx
+++ b/packages/material-ui/test/Form.test.tsx
@@ -197,6 +197,25 @@ describe("single fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  test("hidden field", () => {
+    const schema: JSONSchema7 = {
+      type: "object",
+      properties: {
+        "my-field": {
+          type: "string",
+        },
+      },
+    };
+    const uiSchema: UiSchema = {
+      "my-field": {
+        "ui:widget": "hidden",
+      },
+    };
+    const tree = renderer
+      .create(<Form schema={schema} uiSchema={uiSchema} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
   test("hidden label", () => {
     const schema: JSONSchema7 = {
       type: "string",
diff --git a/packages/material-ui/test/__snapshots__/Form.test.tsx.snap b/packages/material-ui/test/__snapshots__/Form.test.tsx.snap
index b75bba60d4..f4bddd0767 100644
--- a/packages/material-ui/test/__snapshots__/Form.test.tsx.snap
+++ b/packages/material-ui/test/__snapshots__/Form.test.tsx.snap
@@ -795,6 +795,58 @@ exports[`single fields format datetime 1`] = `
 </form>
 `;
 
+exports[`single fields hidden field 1`] = `
+<form
+  className="rjsf"
+  noValidate={false}
+  onSubmit={[Function]}
+>
+  <div
+    className="MuiFormControl-root MuiFormControl-fullWidth"
+  >
+    <div
+      className="MuiGrid-root makeStyles-root-194 MuiGrid-container MuiGrid-spacing-xs-2"
+    >
+      <input
+        id="root_my-field"
+        type="hidden"
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    className="MuiBox-root MuiBox-root-298"
+  >
+    <button
+      className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
+      disabled={false}
+      onBlur={[Function]}
+      onDragLeave={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      tabIndex={0}
+      type="submit"
+    >
+      <span
+        className="MuiButton-label"
+      >
+        Submit
+      </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
+    </button>
+  </div>
+</form>
+`;
+
 exports[`single fields hidden label 1`] = `
 <form
   className="rjsf"
@@ -877,7 +929,7 @@ exports[`single fields hidden label 1`] = `
     </div>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-194"
+    className="MuiBox-root MuiBox-root-299"
   >
     <button
       className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
@@ -901,9 +953,6 @@ exports[`single fields hidden label 1`] = `
       >
         Submit
       </span>
-      <span
-        className="MuiTouchRipple-root"
-      />
     </button>
   </div>
 </form>