diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts
index fea62601a4f1..71e81b9d9156 100644
--- a/src/auth/ha-auth-flow.ts
+++ b/src/auth/ha-auth-flow.ts
@@ -1,7 +1,7 @@
 /* eslint-disable lit/prefer-static-styles */
 import "@material/mwc-button";
 import { genClientId } from "home-assistant-js-websocket";
-import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-alert";
@@ -391,10 +391,8 @@ export class HaAuthFlow extends LitElement {
     }
   }
 
-  static get styles(): CSSResultGroup {
-    // No shadow dom, styles should be in <style> tag inside render
-    return [];
-  }
+  // No shadow dom, styles should be in <style> tag inside render
+  static styles = [];
 }
 
 declare global {
diff --git a/src/auth/ha-auth-form-string.ts b/src/auth/ha-auth-form-string.ts
index 3ad051c33e8d..54f9829ab388 100644
--- a/src/auth/ha-auth-form-string.ts
+++ b/src/auth/ha-auth-form-string.ts
@@ -1,59 +1,39 @@
-import { mdiEye, mdiEyeOff } from "@mdi/js";
-import {
-  CSSResultGroup,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-  html,
-} from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import {
-  HaFormElement,
-  HaFormStringData,
-  HaFormStringSchema,
-} from "../components/ha-form/types";
+/* eslint-disable lit/prefer-static-styles */
+import { TemplateResult, html } from "lit";
+import { customElement } from "lit/decorators";
+import { HaFormString } from "../components/ha-form/ha-form-string";
 import "../components/ha-icon-button";
-
-const MASKED_FIELDS = ["password", "secret", "token"];
+import "./ha-auth-textfield";
 
 @customElement("ha-auth-form-string")
-export class HaAuthFormString extends LitElement implements HaFormElement {
-  @property() public schema!: HaFormStringSchema;
-
-  @property() public data!: HaFormStringData;
-
-  @property() public label!: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @state() private _unmaskedPassword = false;
-
-  @query("input") private _input?: HTMLInputElement;
-
+export class HaAuthFormString extends HaFormString {
   protected createRenderRoot() {
     return this;
   }
 
-  public focus(): void {
-    if (this._input) {
-      this._input.focus();
-    }
-  }
-
   protected render(): TemplateResult {
-    const isPassword = MASKED_FIELDS.some((field) =>
-      this.schema.name.includes(field)
-    );
     return html`
-      <input
-        .type=${!isPassword
-          ? this._stringType
-          : this._unmaskedPassword
-          ? "text"
-          : "password"}
+      <style>
+        ha-auth-form-string {
+          display: block;
+          position: relative;
+        }
+        ha-auth-form-string[own-margin] {
+          margin-bottom: 5px;
+        }
+        ha-auth-textfield {
+          display: block !important;
+        }
+        ${HaFormString.styles}
+      </style>
+      <ha-auth-textfield
+        .type=${
+          !this.isPassword
+            ? this.stringType
+            : this.unmaskedPassword
+            ? "text"
+            : "password"
+        }
         .label=${this.label}
         .value=${this.data || ""}
         .helper=${this.helper}
@@ -63,63 +43,19 @@ export class HaAuthFormString extends LitElement implements HaFormElement {
         .autoValidate=${this.schema.required}
         .name=${this.schema.name}
         .autocomplete=${this.schema.autocomplete}
-        .suffix=${isPassword
-          ? // reserve some space for the icon.
-            html`<div style="width: 24px"></div>`
-          : this.schema.description?.suffix}
+        .suffix=${
+          this.isPassword
+            ? // reserve some space for the icon.
+              html`<div style="width: 24px"></div>`
+            : this.schema.description?.suffix
+        }
         @input=${this._valueChanged}
         @change=${this._valueChanged}
-      />
-      ${isPassword
-        ? html`<ha-icon-button
-            toggles
-            .label=${`${this._unmaskedPassword ? "Hide" : "Show"} password`}
-            @click=${this._toggleUnmaskedPassword}
-            .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
-          ></ha-icon-button>`
-        : ""}
+        ></ha-auth-textfield> 
+        ${this.renderIcon()}
+      </ha-auth-textfield>
     `;
   }
-
-  protected updated(changedProps: PropertyValues): void {
-    if (changedProps.has("schema")) {
-      this.toggleAttribute("own-margin", !!this.schema.required);
-    }
-  }
-
-  private _toggleUnmaskedPassword(): void {
-    this._unmaskedPassword = !this._unmaskedPassword;
-  }
-
-  private _valueChanged(ev: Event): void {
-    let value: string | undefined = (ev.target as HTMLInputElement).value;
-    if (this.data === value) {
-      return;
-    }
-    if (value === "" && !this.schema.required) {
-      value = undefined;
-    }
-    fireEvent(this, "value-changed", {
-      value,
-    });
-  }
-
-  private get _stringType(): string {
-    if (this.schema.format) {
-      if (["email", "url"].includes(this.schema.format)) {
-        return this.schema.format;
-      }
-      if (this.schema.format === "fqdnurl") {
-        return "url";
-      }
-    }
-    return "text";
-  }
-
-  static get styles(): CSSResultGroup {
-    // No shadow dom, styles should be in authorize.html.template
-    return [];
-  }
 }
 
 declare global {
diff --git a/src/auth/ha-auth-form.ts b/src/auth/ha-auth-form.ts
index 67ec2d304737..b17f0ca46f79 100644
--- a/src/auth/ha-auth-form.ts
+++ b/src/auth/ha-auth-form.ts
@@ -1,60 +1,32 @@
 /* eslint-disable lit/prefer-static-styles */
-import { CSSResultGroup, html } from "lit";
+import { html } from "lit";
 import { customElement } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
 import { HaForm } from "../components/ha-form/ha-form";
-import { HaFormElement, HaFormSchema } from "../components/ha-form/types";
 import "./ha-auth-form-string";
 
 @customElement("ha-auth-form")
 export class HaAuthForm extends HaForm {
   protected fieldElementName(type: string): string {
     if (type === "string") {
-      return "ha-auth-form-string";
+      return `ha-auth-form-${type}`;
     }
     return super.fieldElementName(type);
   }
 
   protected createRenderRoot() {
     // attach it as soon as possible to make sure we fetch all events.
-    this.addEventListener("value-changed", (ev) => {
-      ev.stopPropagation();
-      const schema = (ev.target as HaFormElement).schema as HaFormSchema;
-
-      if (ev.target === this) return;
-
-      const newValue = !schema.name
-        ? ev.detail.value
-        : { [schema.name]: ev.detail.value };
-
-      fireEvent(this, "value-changed", {
-        value: { ...this.data, ...newValue },
-      });
-    });
+    this.addValueChangedListener(this);
     return this;
   }
 
   protected render() {
     return html`
       <style>
-        ha-auth-form .root > * {
-          display: block;
-        }
-        ha-auth-form .root > *:not([own-margin]):not(:last-child) {
-          margin-bottom: 24px;
-        }
-        ha-auth-form ha-alert[own-margin] {
-          margin-bottom: 4px;
-        }
+        ${HaForm.styles}
       </style>
       ${super.render()}
     `;
   }
-
-  static get styles(): CSSResultGroup {
-    // No shadow dom, styles should be in <style> tag inside render
-    return [];
-  }
 }
 
 declare global {
diff --git a/src/auth/ha-auth-textfield.ts b/src/auth/ha-auth-textfield.ts
new file mode 100644
index 000000000000..15b78a72fd9a
--- /dev/null
+++ b/src/auth/ha-auth-textfield.ts
@@ -0,0 +1,114 @@
+/* eslint-disable lit/prefer-static-styles */
+import { html } from "lit";
+import { customElement } from "lit/decorators";
+import { HaTextField } from "../components/ha-textfield";
+
+@customElement("ha-auth-textfield")
+export class HaAuthTextField extends HaTextField {
+  public render() {
+    return html`
+      <style>
+        ha-auth-textfield {
+          display: inline-flex;
+          flex-direction: column;
+          outline: none
+        }
+        ha-auth-textfield:not([disabled]):hover :not(.mdc-text-field--invalid):not(.mdc-text-field--focused) mwc-notched-outline {
+          --mdc-notched-outline-border-color: var( --mdc-text-field-outlined-hover-border-color, rgba(0, 0, 0, 0.87))
+        }
+
+        ha-auth-textfield:not([disabled]) .mdc-text-field:not(.mdc-text-field--outlined) {
+          background-color: var(--mdc-text-field-fill-color, whitesmoke)
+        }
+
+        ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--invalid mwc-notched-outline {
+          --mdc-notched-outline-border-color: var( --mdc-text-field-error-color, var(--mdc-theme-error, #b00020))
+        }
+
+        ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-character-counter,
+        ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--invalid .mdc-text-field__icon {
+          color: var(--mdc-text-field-error-color, var(--mdc-theme-error, #b00020))
+        }
+
+        ha-auth-textfield:not([disabled]) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,
+        ha-auth-textfield:not([disabled]) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label::after {
+          color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6))
+        }
+
+        ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--focused mwc-notched-outline {
+          --mdc-notched-outline-stroke-width: 2px
+        }
+
+        ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) mwc-notched-outline {
+          --mdc-notched-outline-border-color: var( --mdc-text-field-focused-label-color, var(--mdc-theme-primary, rgba(98, 0, 238, 0.87)))
+        }
+
+        ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) .mdc-floating-label {
+          color: #6200ee;
+          color: var(--mdc-theme-primary, #6200ee)
+        }
+
+        ha-auth-textfield:not([disabled]) .mdc-text-field .mdc-text-field__input {
+          color: var(--mdc-text-field-ink-color, rgba(0, 0, 0, 0.87))
+        }
+
+        ha-auth-textfield:not([disabled]) .mdc-text-field .mdc-text-field__input::placeholder {
+          color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6))
+        }
+
+        ha-auth-textfield:not([disabled]) .mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg),
+        ha-auth-textfield:not([disabled]) .mdc-text-field-helper-line:not(.mdc-text-field--invalid) .mdc-text-field-character-counter {
+          color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6))
+        }
+
+        ha-auth-textfield[disabled] .mdc-text-field:not(.mdc-text-field--outlined) {
+          background-color: var(--mdc-text-field-disabled-fill-color, #fafafa)
+        }
+
+        ha-auth-textfield[disabled] .mdc-text-field.mdc-text-field--outlined mwc-notched-outline {
+          --mdc-notched-outline-border-color: var( --mdc-text-field-outlined-disabled-border-color, rgba(0, 0, 0, 0.06))
+        }
+
+        ha-auth-textfield[disabled] .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,
+        ha-auth-textfield[disabled] .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label::after {
+          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.38))
+        }
+
+        ha-auth-textfield[disabled] .mdc-text-field .mdc-text-field__input,
+        ha-auth-textfield[disabled] .mdc-text-field .mdc-text-field__input::placeholder {
+          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.38))
+        }
+
+        ha-auth-textfield[disabled] .mdc-text-field-helper-line .mdc-text-field-helper-text,
+        ha-auth-textfield[disabled] .mdc-text-field-helper-line .mdc-text-field-character-counter {
+          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.38))
+        }
+        ha-auth-textfield:not([disabled]) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) .mdc-floating-label {
+          color: var(--mdc-theme-primary,#6200ee)
+        }
+        ha-auth-textfield[no-spinner] input::-webkit-outer-spin-button,
+        ha-auth-textfield[no-spinner] input::-webkit-inner-spin-button {
+           -webkit-appearance: none;
+           margin: 0;
+        }
+
+         /* Firefox */
+        ha-auth-textfield[no-spinner] input[type="number"] {
+           -moz-appearance: textfield;
+        }
+        ${HaAuthTextField.styles}
+      </style>
+      ${super.render()}
+    `;
+  }
+
+  protected createRenderRoot() {
+    return this;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-auth-textfield": HaAuthTextField;
+  }
+}
diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts
index afa9238201c0..8a69a1029fd1 100644
--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@@ -1,5 +1,5 @@
 /* eslint-disable lit/prefer-static-styles */
-import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import punycode from "punycode";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
@@ -248,9 +248,4 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
   private async _handleAuthProviderPick(ev) {
     this._authProvider = ev.detail;
   }
-
-  static get styles(): CSSResultGroup {
-    // No shadow dom, styles should be in <style> tag inside render
-    return [];
-  }
 }
diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts
index 5cc63ce1d482..3118fcf948a1 100644
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@@ -1,11 +1,13 @@
+/* eslint-disable lit/prefer-static-styles */
 import { mdiEye, mdiEyeOff } from "@mdi/js";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
   TemplateResult,
+  css,
+  html,
+  nothing,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -32,7 +34,7 @@ export class HaFormString extends LitElement implements HaFormElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @state() private _unmaskedPassword = false;
+  @state() protected unmaskedPassword = false;
 
   @query("ha-textfield") private _input?: HaTextField;
 
@@ -43,14 +45,11 @@ export class HaFormString extends LitElement implements HaFormElement {
   }
 
   protected render(): TemplateResult {
-    const isPassword = MASKED_FIELDS.some((field) =>
-      this.schema.name.includes(field)
-    );
     return html`
       <ha-textfield
-        .type=${!isPassword
-          ? this._stringType
-          : this._unmaskedPassword
+        .type=${!this.isPassword
+          ? this.stringType
+          : this.unmaskedPassword
           ? "text"
           : "password"}
         .label=${this.label}
@@ -62,7 +61,7 @@ export class HaFormString extends LitElement implements HaFormElement {
         .autoValidate=${this.schema.required}
         .name=${this.schema.name}
         .autocomplete=${this.schema.autocomplete}
-        .suffix=${isPassword
+        .suffix=${this.isPassword
           ? // reserve some space for the icon.
             html`<div style="width: 24px"></div>`
           : this.schema.description?.suffix}
@@ -70,14 +69,19 @@ export class HaFormString extends LitElement implements HaFormElement {
         @input=${this._valueChanged}
         @change=${this._valueChanged}
       ></ha-textfield>
-      ${isPassword
-        ? html`<ha-icon-button
-            toggles
-            .label=${`${this._unmaskedPassword ? "Hide" : "Show"} password`}
-            @click=${this._toggleUnmaskedPassword}
-            .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
-          ></ha-icon-button>`
-        : ""}
+      ${this.renderIcon()}
+    `;
+  }
+
+  protected renderIcon() {
+    if (!this.isPassword) return nothing;
+    return html`
+      <ha-icon-button
+        toggles
+        .label=${`${this.unmaskedPassword ? "Hide" : "Show"} password`}
+        @click=${this.toggleUnmaskedPassword}
+        .path=${this.unmaskedPassword ? mdiEyeOff : mdiEye}
+      ></ha-icon-button>
     `;
   }
 
@@ -87,11 +91,11 @@ export class HaFormString extends LitElement implements HaFormElement {
     }
   }
 
-  private _toggleUnmaskedPassword(): void {
-    this._unmaskedPassword = !this._unmaskedPassword;
+  protected toggleUnmaskedPassword(): void {
+    this.unmaskedPassword = !this.unmaskedPassword;
   }
 
-  private _valueChanged(ev: Event): void {
+  protected _valueChanged(ev: Event): void {
     let value: string | undefined = (ev.target as HaTextField).value;
     if (this.data === value) {
       return;
@@ -104,7 +108,7 @@ export class HaFormString extends LitElement implements HaFormElement {
     });
   }
 
-  private get _stringType(): string {
+  protected get stringType(): string {
     if (this.schema.format) {
       if (["email", "url"].includes(this.schema.format)) {
         return this.schema.format;
@@ -116,6 +120,10 @@ export class HaFormString extends LitElement implements HaFormElement {
     return "text";
   }
 
+  protected get isPassword(): boolean {
+    return MASKED_FIELDS.some((field) => this.schema.name.includes(field));
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       :host {
diff --git a/src/components/ha-form/ha-form.ts b/src/components/ha-form/ha-form.ts
index 24b7a03cdbff..f7a06cd2698b 100644
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@@ -1,3 +1,4 @@
+/* eslint-disable lit/prefer-static-styles */
 import {
   css,
   CSSResultGroup,
@@ -63,6 +64,8 @@ export class HaForm extends LitElement implements HaFormElement {
 
   @property() public localizeValue?: (key: string) => string;
 
+  @property({ attribute: "light-dom", type: Boolean }) lightDom?: boolean;
+
   public async focus() {
     await this.updateComplete;
     const root = this.renderRoot.querySelector(".root");
@@ -152,8 +155,8 @@ export class HaForm extends LitElement implements HaFormElement {
     `;
   }
 
-  protected fieldElementName(type: string) {
-    return `ha-form-${type}`;
+  protected fieldElementName(type: string): string {
+    return `ha-auth-form-${type}`;
   }
 
   private _generateContext(
@@ -171,12 +174,19 @@ export class HaForm extends LitElement implements HaFormElement {
   }
 
   protected createRenderRoot() {
-    const root = super.createRenderRoot();
+    const root = this.lightDom ? this : super.createRenderRoot();
     // attach it as soon as possible to make sure we fetch all events.
-    root.addEventListener("value-changed", (ev) => {
+    this.addValueChangedListener(root);
+    return root;
+  }
+
+  protected addValueChangedListener(element: Element | ShadowRoot) {
+    element.addEventListener("value-changed", (ev) => {
       ev.stopPropagation();
       const schema = (ev.target as HaFormElement).schema as HaFormSchema;
 
+      if (ev.target === this) return;
+
       const newValue = !schema.name
         ? ev.detail.value
         : { [schema.name]: ev.detail.value };
@@ -185,7 +195,6 @@ export class HaForm extends LitElement implements HaFormElement {
         value: { ...this.data, ...newValue },
       });
     });
-    return root;
   }
 
   private _computeLabel(schema: HaFormSchema, data: HaFormDataContainer) {