diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js
index 13826a3c6..66919f3f2 100644
--- a/packages/button/src/LionButton.js
+++ b/packages/button/src/LionButton.js
@@ -119,6 +119,10 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
           pointer-events: none;
         }
 
+        :host([hidden]) {
+          display: none;
+        }
+
         :host([disabled]) .btn {
           /* if you extend, please overwrite */
           background: lightgray;
diff --git a/packages/button/test/lion-button.test.js b/packages/button/test/lion-button.test.js
index b95c7cf96..0c4d09571 100644
--- a/packages/button/test/lion-button.test.js
+++ b/packages/button/test/lion-button.test.js
@@ -49,6 +49,11 @@ describe('lion-button', () => {
     expect(window.getComputedStyle(el._nativeButtonNode).clip).to.equal('rect(0px, 0px, 0px, 0px)');
   });
 
+  it('is hidden when attribute hidden is true', async () => {
+    const el = await fixture(`<lion-button hidden>foo</lion-button>`);
+    expect(el).not.to.be.displayed;
+  });
+
   it('can be disabled imperatively', async () => {
     const el = await fixture(`<lion-button disabled>foo</lion-button>`);
     expect(el.getAttribute('tabindex')).to.equal('-1');
diff --git a/packages/calendar/src/calendarStyle.js b/packages/calendar/src/calendarStyle.js
index e6cd64110..d809581e0 100644
--- a/packages/calendar/src/calendarStyle.js
+++ b/packages/calendar/src/calendarStyle.js
@@ -5,6 +5,10 @@ export const calendarStyle = css`
     display: block;
   }
 
+  :host([hidden]) {
+    display: none;
+  }
+
   .calendar {
     display: block;
   }
diff --git a/packages/calendar/test/lion-calendar.test.js b/packages/calendar/test/lion-calendar.test.js
index 0f2381c29..438edddb2 100644
--- a/packages/calendar/test/lion-calendar.test.js
+++ b/packages/calendar/test/lion-calendar.test.js
@@ -1276,5 +1276,14 @@ describe('<lion-calendar>', () => {
       );
       await expect(el).to.be.accessible();
     });
+
+    it('is hidden when attribute hidden is true', async () => {
+      const el = await fixture(
+        html`
+          <lion-calendar hidden></lion-calendar>
+        `,
+      );
+      expect(el).not.to.be.displayed;
+    });
   });
 });
diff --git a/packages/choice-input/src/ChoiceInputMixin.js b/packages/choice-input/src/ChoiceInputMixin.js
index 44415fc41..ec34ec85e 100644
--- a/packages/choice-input/src/ChoiceInputMixin.js
+++ b/packages/choice-input/src/ChoiceInputMixin.js
@@ -94,6 +94,10 @@ export const ChoiceInputMixin = superclass =>
             display: flex;
           }
 
+          :host([hidden]) {
+            display: none;
+          }
+
           .choice-field__graphic-container {
             display: none;
           }
diff --git a/packages/choice-input/test/ChoiceInputMixin.test.js b/packages/choice-input/test/ChoiceInputMixin.test.js
index b7e42bdc8..099fe04fe 100644
--- a/packages/choice-input/test/ChoiceInputMixin.test.js
+++ b/packages/choice-input/test/ChoiceInputMixin.test.js
@@ -16,6 +16,13 @@ describe('ChoiceInputMixin', () => {
     customElements.define('choice-input', ChoiceInput);
   });
 
+  it('is hidden when attribute hidden is true', async () => {
+    const el = await fixture(html`
+      <choice-input hidden></choice-input>
+    `);
+    expect(el).not.to.be.displayed;
+  });
+
   it('has choiceValue', async () => {
     const el = await fixture(html`
       <choice-input .choiceValue=${'foo'}></choice-input>
diff --git a/packages/field/src/FormControlMixin.js b/packages/field/src/FormControlMixin.js
index 045298016..24b179416 100644
--- a/packages/field/src/FormControlMixin.js
+++ b/packages/field/src/FormControlMixin.js
@@ -504,6 +504,10 @@ export const FormControlMixin = dedupeMixin(
               display: block;
             }
 
+            :host([hidden]) {
+              display: none;
+            }
+
             :host([disabled]) {
               pointer-events: none;
             }
diff --git a/packages/field/test/FormControlMixin.test.js b/packages/field/test/FormControlMixin.test.js
index 41817c71b..7a15a01e5 100644
--- a/packages/field/test/FormControlMixin.test.js
+++ b/packages/field/test/FormControlMixin.test.js
@@ -46,6 +46,15 @@ describe('FormControlMixin', () => {
     expect(elElem.label).to.equal('Email address', 'as an element');
   });
 
+  it('is hidden when attribute hidden is true', async () => {
+    const el = await fixture(html`
+    <${tag} hidden>
+    <label slot="label">Email <span>address</span></label>
+        ${inputSlot}
+    </${tag}>`);
+    expect(el).not.to.be.displayed;
+  });
+
   it('has a label that supports inner html', async () => {
     const el = await fixture(html`
       <${tag}>
diff --git a/packages/icon/src/LionIcon.js b/packages/icon/src/LionIcon.js
index 10e528bcf..546d9c0b0 100644
--- a/packages/icon/src/LionIcon.js
+++ b/packages/icon/src/LionIcon.js
@@ -69,6 +69,10 @@ export class LionIcon extends LitElement {
           height: 1em;
         }
 
+        :host([hidden]) {
+          display: none;
+        }
+
         :host:first-child {
           margin-left: 0;
         }
diff --git a/packages/icon/test/lion-icon.test.js b/packages/icon/test/lion-icon.test.js
index 04dbf647e..bc2d5d0d9 100644
--- a/packages/icon/test/lion-icon.test.js
+++ b/packages/icon/test/lion-icon.test.js
@@ -17,6 +17,16 @@ describe('lion-icon', () => {
     expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
   });
 
+  it('is hidden when attribute hidden is true', async () => {
+    const iconFunction = tag => tag`<svg data-test-id="svg"></svg>`;
+    const el = await fixture(
+      html`
+        <lion-icon .svg=${iconFunction} hidden></lion-icon>
+      `,
+    );
+    expect(el).not.to.be.displayed;
+  });
+
   it('supports svg icon as a lit-html template', async () => {
     const icon = html`
       <svg data-test-id="svg"></svg>
diff --git a/packages/input-datepicker/src/LionCalendarOverlayFrame.js b/packages/input-datepicker/src/LionCalendarOverlayFrame.js
index d744ec4c3..e5369e43f 100644
--- a/packages/input-datepicker/src/LionCalendarOverlayFrame.js
+++ b/packages/input-datepicker/src/LionCalendarOverlayFrame.js
@@ -11,6 +11,10 @@ export class LionCalendarOverlayFrame extends LocalizeMixin(LitElement) {
           position: relative;
         }
 
+        :host([hidden]) {
+          display: none;
+        }
+
         .calendar-overlay__header {
           display: flex;
         }
diff --git a/packages/input-datepicker/test/lion-input-datepicker.test.js b/packages/input-datepicker/test/lion-input-datepicker.test.js
index 8e8626195..c2034ae91 100644
--- a/packages/input-datepicker/test/lion-input-datepicker.test.js
+++ b/packages/input-datepicker/test/lion-input-datepicker.test.js
@@ -513,5 +513,18 @@ describe('<lion-input-datepicker>', () => {
       await elObj.openCalendar();
       expect(submitSpy.callCount).to.equal(0);
     });
+
+    it('is hidden when attribute hidden is true', async () => {
+      const el = await fixture(html`
+        <lion-input-datepicker></lion-input-datepicker>
+      `);
+
+      await el.updateComplete;
+      const myElObj = new DatepickerInputObject(el);
+      await myElObj.openCalendar();
+      myElObj.overlayEl.hidden = true;
+      await el.updateComplete;
+      expect(myElObj.overlayEl).not.to.be.displayed;
+    });
   });
 });
diff --git a/packages/select-rich/src/LionOption.js b/packages/select-rich/src/LionOption.js
index ab84dc105..572d1221d 100644
--- a/packages/select-rich/src/LionOption.js
+++ b/packages/select-rich/src/LionOption.js
@@ -32,6 +32,10 @@ export class LionOption extends DisabledMixin(ChoiceInputMixin(FormRegisteringMi
           padding: 4px;
         }
 
+        :host([hidden]) {
+          display: none;
+        }
+
         :host([active]),
         :host(:hover) {
           background-color: #ddd;
diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js
index b6bf62456..cfc60262f 100644
--- a/packages/select-rich/src/LionSelectRich.js
+++ b/packages/select-rich/src/LionSelectRich.js
@@ -100,6 +100,10 @@ export class LionSelectRich extends ScopedElementsMixin(
           display: block;
         }
 
+        :host([hidden]) {
+          display: none;
+        }
+
         :host([disabled]) {
           color: #adadad;
         }
diff --git a/packages/select-rich/test/lion-option.test.js b/packages/select-rich/test/lion-option.test.js
index 964a484b9..b9c3539e7 100644
--- a/packages/select-rich/test/lion-option.test.js
+++ b/packages/select-rich/test/lion-option.test.js
@@ -18,6 +18,15 @@ describe('lion-option', () => {
       `);
       expect(el.modelValue).to.deep.equal({ value: 10, checked: true });
     });
+
+    it('is hidden when attribute hidden is true', async () => {
+      const el = await fixture(
+        html`
+          <lion-option .choiceValue=${10} hidden></lion-option>
+        `,
+      );
+      expect(el).not.to.be.displayed;
+    });
   });
 
   describe('Accessibility', () => {
diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js
index b6e14a2b9..27d3a2d56 100644
--- a/packages/select-rich/test/lion-select-rich.test.js
+++ b/packages/select-rich/test/lion-select-rich.test.js
@@ -104,6 +104,17 @@ describe('lion-select-rich', () => {
     expect(el.formElements[2].checked).to.be.true;
   });
 
+  it('is hidden when attribute hidden is true', async () => {
+    const el = await fixture(
+      html`
+        <lion-select-rich label="foo" hidden
+          ><lion-options slot="input"></lion-options
+        ></lion-select-rich>
+      `,
+    );
+    expect(el).not.to.be.displayed;
+  });
+
   it(`has a fieldName based on the label`, async () => {
     const el1 = await fixture(
       html`
diff --git a/packages/steps/src/LionStep.js b/packages/steps/src/LionStep.js
index 3db30564d..9982d361e 100644
--- a/packages/steps/src/LionStep.js
+++ b/packages/steps/src/LionStep.js
@@ -84,6 +84,10 @@ export class LionStep extends LitElement {
           display: none;
         }
 
+        :host([hidden]) {
+          display: none;
+        }
+
         :host([status='entered']) {
           display: block;
         }
diff --git a/packages/steps/src/LionSteps.js b/packages/steps/src/LionSteps.js
index 69a529a32..c50802e88 100644
--- a/packages/steps/src/LionSteps.js
+++ b/packages/steps/src/LionSteps.js
@@ -54,6 +54,10 @@ export class LionSteps extends LitElement {
         :host {
           display: block;
         }
+
+        :host([hidden]) {
+          display: none;
+        }
       `,
     ];
   }
diff --git a/packages/steps/test/lion-step.test.js b/packages/steps/test/lion-step.test.js
index 53a4a8b8e..ab3dfc82c 100644
--- a/packages/steps/test/lion-step.test.js
+++ b/packages/steps/test/lion-step.test.js
@@ -44,6 +44,17 @@ describe('lion-step', () => {
     expect(el.children[0].status).to.equal('untouched');
   });
 
+  it('is hidden when attribute hidden is true', async () => {
+    const el = await fixture(
+      html`
+        <fake-lion-steps>
+          <lion-step hidden>Step 1</lion-step>
+        </fake-lion-steps>
+      `,
+    );
+    expect(el.children[0]).not.to.be.displayed;
+  });
+
   it('communicates with a parent steps controller to handles actions', async () => {
     const el = await fixture(html`
       <fake-lion-steps>
diff --git a/packages/steps/test/lion-steps.test.js b/packages/steps/test/lion-steps.test.js
index e1289fa50..cd3aef18f 100644
--- a/packages/steps/test/lion-steps.test.js
+++ b/packages/steps/test/lion-steps.test.js
@@ -34,6 +34,15 @@ describe('lion-steps', () => {
     expect(el).to.be.a('HTMLElement');
   });
 
+  it('is hidden when attribute hidden is true', async () => {
+    const el = await fixture(
+      html`
+        <lion-steps hidden> </lion-steps>
+      `,
+    );
+    expect(el).not.to.be.displayed;
+  });
+
   it('has "steps" getter that returns default slot elements', async () => {
     const el = await fixture(html`
       <lion-steps>
diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js
index 6d64c535b..b5f388cf5 100644
--- a/packages/switch/src/LionSwitch.js
+++ b/packages/switch/src/LionSwitch.js
@@ -8,6 +8,10 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
     return [
       super.styles,
       css`
+        :host([hidden]) {
+          display: none;
+        }
+
         :host([disabled]) {
           color: #adadad;
         }
diff --git a/packages/switch/src/LionSwitchButton.js b/packages/switch/src/LionSwitchButton.js
index 17a82e5ff..877907147 100644
--- a/packages/switch/src/LionSwitchButton.js
+++ b/packages/switch/src/LionSwitchButton.js
@@ -25,6 +25,10 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
           outline: 0;
         }
 
+        :host([hidden]) {
+          display: none;
+        }
+
         .btn {
           position: relative;
           height: 100%;
diff --git a/packages/switch/test/lion-switch-button.test.js b/packages/switch/test/lion-switch-button.test.js
index 9ccdc9317..cfdd43af4 100644
--- a/packages/switch/test/lion-switch-button.test.js
+++ b/packages/switch/test/lion-switch-button.test.js
@@ -25,6 +25,12 @@ describe('lion-switch-button', () => {
     expect(el.hasAttribute('checked')).to.be.false;
   });
 
+  it('is hidden when attribute hidden is true', async () => {
+    el.hidden = true;
+    await el.updateComplete;
+    expect(el).not.to.be.displayed;
+  });
+
   it('should toggle the value of "checked" on click', async () => {
     expect(el.checked).to.be.false;
     expect(el.hasAttribute('checked')).to.be.false;
diff --git a/packages/switch/test/lion-switch.test.js b/packages/switch/test/lion-switch.test.js
index 9077c7c29..62e2e95a4 100644
--- a/packages/switch/test/lion-switch.test.js
+++ b/packages/switch/test/lion-switch.test.js
@@ -22,6 +22,15 @@ describe('lion-switch', () => {
     expect(el._inputNode.hasAttribute('disabled')).to.be.false;
   });
 
+  it('is hidden when attribute hidden is true', async () => {
+    const el = await fixture(
+      html`
+        <lion-switch hidden></lion-switch>
+      `,
+    );
+    expect(el).not.to.be.displayed;
+  });
+
   it('should sync its "checked" state to child button', async () => {
     const uncheckedEl = await fixture(html`
       <lion-switch></lion-switch>
diff --git a/packages/tooltip/src/LionTooltipArrow.js b/packages/tooltip/src/LionTooltipArrow.js
index 0bcf8f975..0cef9a7ef 100644
--- a/packages/tooltip/src/LionTooltipArrow.js
+++ b/packages/tooltip/src/LionTooltipArrow.js
@@ -17,6 +17,10 @@ export class LionTooltipArrow extends LitElement {
         height: var(--tooltip-arrow-height);
       }
 
+      :host([hidden]) {
+        display: none;
+      }
+
       :host svg {
         display: block;
       }
diff --git a/packages/tooltip/test/lion-tooltip-arrow.test.js b/packages/tooltip/test/lion-tooltip-arrow.test.js
index f7d31b5ef..9f70f9c0b 100644
--- a/packages/tooltip/test/lion-tooltip-arrow.test.js
+++ b/packages/tooltip/test/lion-tooltip-arrow.test.js
@@ -41,6 +41,23 @@ describe('lion-tooltip-arrow', () => {
     expect(arrowElement.getAttribute('placement')).to.equal('bottom');
   });
 
+  it('is hidden when attribute hidden is true', async () => {
+    const el = await fixture(html`
+      <lion-tooltip .config="${{}}">
+        <div slot="content">
+          Hey there
+        </div>
+        <button slot="invoker">Tooltip button</button>
+        <lion-tooltip-arrow slot="arrow" hidden></lion-tooltip-arrow>
+      </lion-tooltip>
+    `);
+    const arrowElement = el.querySelector('lion-tooltip-arrow');
+    el.opened = true;
+
+    await el.repositionComplete;
+    expect(arrowElement).not.to.be.displayed;
+  });
+
   it('makes sure positioning of the arrow is correct', async () => {
     const el = await fixture(html`
       <lion-tooltip