diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts
index dbc9150ecf..2d68bf0461 100644
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -73,7 +73,7 @@ export const handleChangeEvent = (element: ActionElement, ev: CustomEvent) => {
   if (!name) {
     return;
   }
-  const newVal = ev.detail.value;
+  const newVal = ev.detail?.value || (ev.target as any).value;
 
   if ((element.action[name] || "") === newVal) {
     return;
@@ -376,7 +376,7 @@ export default class HaAutomationActionRow extends LitElement {
           margin: 4px 0;
         }
         mwc-select {
-          margin-bottom: 16px;
+          margin-bottom: 24px;
         }
       `,
     ];
diff --git a/src/panels/config/automation/action/types/ha-automation-action-device_id.ts b/src/panels/config/automation/action/types/ha-automation-action-device_id.ts
index c03b480d1b..c837304ea9 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-device_id.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-device_id.ts
@@ -143,9 +143,12 @@ export class HaDeviceAction extends LitElement {
   }
 
   static styles = css`
+    ha-device-picker {
+      display: block;
+      margin-bottom: 24px;
+    }
     ha-device-action-picker {
       display: block;
-      margin-top: 8px;
     }
   `;
 }
diff --git a/src/panels/config/automation/action/types/ha-automation-action-event.ts b/src/panels/config/automation/action/types/ha-automation-action-event.ts
index 26ebb424c9..ee133fa7da 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-event.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-event.ts
@@ -1,9 +1,9 @@
-import "@polymer/paper-input/paper-input";
-import { html, LitElement, PropertyValues } from "lit";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/entity/ha-entity-picker";
 import "../../../../../components/ha-service-picker";
+import "../../../../../components/ha-textfield";
 import "../../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../../components/ha-yaml-editor";
 import type { EventAction } from "../../../../../data/script";
@@ -40,14 +40,13 @@ export class HaEventAction extends LitElement implements ActionElement {
     const { event, event_data } = this.action;
 
     return html`
-      <paper-input
+      <ha-textfield
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.actions.type.event.event"
         )}
-        name="event"
         .value=${event}
-        @value-changed=${this._eventChanged}
-      ></paper-input>
+        @change=${this._eventChanged}
+      ></ha-textfield>
       <ha-yaml-editor
         .hass=${this.hass}
         .label=${this.hass.localize(
@@ -72,9 +71,17 @@ export class HaEventAction extends LitElement implements ActionElement {
   private _eventChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     fireEvent(this, "value-changed", {
-      value: { ...this.action, event: ev.detail.value },
+      value: { ...this.action, event: (ev.target as any).value },
     });
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-textfield {
+        display: block;
+      }
+    `;
+  }
 }
 
 declare global {
diff --git a/src/panels/config/automation/action/types/ha-automation-action-play_media.ts b/src/panels/config/automation/action/types/ha-automation-action-play_media.ts
index ba9f537513..2be01f782f 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-play_media.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-play_media.ts
@@ -1,4 +1,3 @@
-import "@polymer/paper-input/paper-input";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
diff --git a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
index 6037160e47..0238269e14 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
@@ -1,4 +1,3 @@
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
@@ -10,10 +9,11 @@ import {
   WhileRepeat,
 } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
-import { HomeAssistant } from "../../../../../types";
-import { Condition } from "../../../../lovelace/common/validate-condition";
+import type { HomeAssistant } from "../../../../../types";
+import type { Condition } from "../../../../lovelace/common/validate-condition";
 import "../ha-automation-action";
-import { ActionElement } from "../ha-automation-action-row";
+import "../../../../../components/ha-textfield";
+import type { ActionElement } from "../ha-automation-action-row";
 
 const OPTIONS = ["count", "while", "until"];
 
@@ -53,14 +53,16 @@ export class HaRepeatAction extends LitElement implements ActionElement {
         )}
       </mwc-select>
       ${type === "count"
-        ? html`<paper-input
-            .label=${this.hass.localize(
-              "ui.panel.config.automation.editor.actions.type.repeat.type.count.label"
-            )}
-            name="count"
-            .value=${(action as CountRepeat).count || "0"}
-            @value-changed=${this._countChanged}
-          ></paper-input>`
+        ? html`
+            <ha-textfield
+              .label=${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.repeat.type.count.label"
+              )}
+              name="count"
+              .value=${(action as CountRepeat).count || "0"}
+              @change=${this._countChanged}
+            ></ha-textfield>
+          `
         : ""}
       ${type === "while"
         ? html` <h3>
@@ -142,7 +144,7 @@ export class HaRepeatAction extends LitElement implements ActionElement {
   }
 
   private _countChanged(ev: CustomEvent): void {
-    const newVal = ev.detail.value;
+    const newVal = (ev.target as any).value;
     if ((this.action.repeat as CountRepeat).count === newVal) {
       return;
     }
diff --git a/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts b/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts
index 997ab3e752..2b76b0918c 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts
@@ -1,6 +1,5 @@
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-input/paper-textarea";
-import { html, LitElement } from "lit";
+import "../../../../../components/ha-textfield";
+import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-formfield";
@@ -26,14 +25,14 @@ export class HaWaitForTriggerAction
     const { wait_for_trigger, continue_on_timeout, timeout } = this.action;
 
     return html`
-      <paper-input
+      <ha-textfield
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.actions.type.wait_for_trigger.timeout"
         )}
         .name=${"timeout"}
-        .value=${timeout}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
+        .value=${timeout || ""}
+        @change=${this._valueChanged}
+      ></ha-textfield>
       <br />
       <ha-formfield
         .label=${this.hass.localize(
@@ -63,6 +62,15 @@ export class HaWaitForTriggerAction
   private _valueChanged(ev: CustomEvent): void {
     handleChangeEvent(this, ev);
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-textfield {
+        display: block;
+        margin-bottom: 24px;
+      }
+    `;
+  }
 }
 
 declare global {
diff --git a/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts b/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts
index 62e7a5bbb9..423c0f224c 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts
@@ -1,66 +1,60 @@
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-input/paper-textarea";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import { WaitAction } from "../../../../../data/script";
-import { HomeAssistant } from "../../../../../types";
-import { ActionElement, handleChangeEvent } from "../ha-automation-action-row";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import type { WaitAction } from "../../../../../data/script";
+import type { HomeAssistant } from "../../../../../types";
+import type { ActionElement } from "../ha-automation-action-row";
+import "../../../../../components/ha-form/ha-form";
+
+const SCHEMA: HaFormSchema[] = [
+  {
+    name: "wait_template",
+    selector: {
+      text: {
+        multiline: true,
+      },
+    },
+  },
+  {
+    name: "timeout",
+    required: false,
+    selector: {
+      text: {},
+    },
+  },
+  {
+    name: "continue_on_timeout",
+    selector: { boolean: {} },
+  },
+];
 
 @customElement("ha-automation-action-wait_template")
 export class HaWaitAction extends LitElement implements ActionElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public action!: WaitAction;
+  @property({ attribute: false }) public action!: WaitAction;
 
   public static get defaultConfig() {
     return { wait_template: "" };
   }
 
   protected render() {
-    const { wait_template, timeout, continue_on_timeout } = this.action;
-
     return html`
-      <paper-textarea
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.type.wait_template.wait_template"
-        )}
-        name="wait_template"
-        .value=${wait_template}
-        @value-changed=${this._valueChanged}
-        dir="ltr"
-      ></paper-textarea>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.type.wait_template.timeout"
-        )}
-        .name=${"timeout"}
-        .value=${timeout}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <br />
-      <ha-formfield
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.type.wait_template.continue_timeout"
-        )}
-      >
-        <ha-switch
-          .checked=${continue_on_timeout}
-          @change=${this._continueChanged}
-        ></ha-switch>
-      </ha-formfield>
+      <ha-form
+        .hass=${this.hass}
+        .data=${this.action}
+        .schema=${SCHEMA}
+        .computeLabel=${this._computeLabelCallback}
+      ></ha-form>
     `;
   }
 
-  private _continueChanged(ev) {
-    fireEvent(this, "value-changed", {
-      value: { ...this.action, continue_on_timeout: ev.target.checked },
-    });
-  }
-
-  private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
-  }
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.actions.type.wait_template.${
+        schema.name === "continue_on_timeout" ? "continue_timeout" : schema.name
+      }`
+    );
 }
 
 declare global {
diff --git a/src/panels/config/automation/condition/ha-automation-condition-editor.ts b/src/panels/config/automation/condition/ha-automation-condition-editor.ts
index e6c9378c8f..c03933e600 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts
@@ -147,7 +147,7 @@ export default class HaAutomationConditionEditor extends LitElement {
     haStyle,
     css`
       mwc-select {
-        margin-bottom: 16px;
+        margin-bottom: 24px;
       }
     `,
   ];
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-state.ts b/src/panels/config/automation/condition/types/ha-automation-condition-state.ts
index 9c88cdfb50..e6d166adaa 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-state.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-state.ts
@@ -9,6 +9,7 @@ import type { StateCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import { forDictStruct } from "../../structs";
 import type { ConditionElement } from "../ha-automation-condition-row";
+import "../../../../../components/ha-form/ha-form";
 
 const stateConditionStruct = object({
   condition: literal("state"),
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts b/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts
index e3d466ca6e..e8966b6969 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts
@@ -7,6 +7,7 @@ import type { HomeAssistant } from "../../../../../types";
 import type { ConditionElement } from "../ha-automation-condition-row";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import "../../../../../components/ha-form/ha-form";
 
 @customElement("ha-automation-condition-sun")
 export class HaSunCondition extends LitElement implements ConditionElement {
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-time.ts b/src/panels/config/automation/condition/types/ha-automation-condition-time.ts
index f09a132ff2..fca4616a7e 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-time.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-time.ts
@@ -7,6 +7,7 @@ import type { HomeAssistant } from "../../../../../types";
 import type { ConditionElement } from "../ha-automation-condition-row";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import "../../../../../components/ha-form/ha-form";
 
 const DAYS = {
   mon: 1,
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index 3a0d34706b..9a6293175c 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -9,7 +9,6 @@ import {
 } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-input/paper-textarea";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
@@ -201,7 +200,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         ${this._config
           ? html`
               ${this.narrow
-                ? html` <span slot="header">${this._config?.alias}</span> `
+                ? html`<span slot="header">${this._config?.alias}</span>`
                 : ""}
               <div
                 class="content ${classMap({
@@ -210,27 +209,31 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                 @subscribe-automation-config=${this._subscribeAutomationConfig}
               >
                 ${this._errors
-                  ? html` <div class="errors">${this._errors}</div> `
+                  ? html`<div class="errors">${this._errors}</div>`
                   : ""}
                 ${this._mode === "gui"
                   ? html`
                       ${"use_blueprint" in this._config
-                        ? html`<blueprint-automation-editor
-                            .hass=${this.hass}
-                            .narrow=${this.narrow}
-                            .isWide=${this.isWide}
-                            .stateObj=${stateObj}
-                            .config=${this._config}
-                            @value-changed=${this._valueChanged}
-                          ></blueprint-automation-editor>`
-                        : html`<manual-automation-editor
-                            .hass=${this.hass}
-                            .narrow=${this.narrow}
-                            .isWide=${this.isWide}
-                            .stateObj=${stateObj}
-                            .config=${this._config}
-                            @value-changed=${this._valueChanged}
-                          ></manual-automation-editor>`}
+                        ? html`
+                            <blueprint-automation-editor
+                              .hass=${this.hass}
+                              .narrow=${this.narrow}
+                              .isWide=${this.isWide}
+                              .stateObj=${stateObj}
+                              .config=${this._config}
+                              @value-changed=${this._valueChanged}
+                            ></blueprint-automation-editor>
+                          `
+                        : html`
+                            <manual-automation-editor
+                              .hass=${this.hass}
+                              .narrow=${this.narrow}
+                              .isWide=${this.isWide}
+                              .stateObj=${stateObj}
+                              .config=${this._config}
+                              @value-changed=${this._valueChanged}
+                            ></manual-automation-editor>
+                          `}
                     `
                   : this._mode === "yaml"
                   ? html`
diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
index 9f25fe3a00..7c637b4dc7 100644
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@@ -7,7 +7,6 @@ import {
   mdiPlayCircleOutline,
   mdiPlus,
 } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts
index 755f7b639a..3fd2d8c915 100644
--- a/src/panels/config/automation/manual-automation-editor.ts
+++ b/src/panels/config/automation/manual-automation-editor.ts
@@ -1,11 +1,12 @@
 import "@material/mwc-button/mwc-button";
-import "@polymer/paper-input/paper-textarea";
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-card";
+import "../../../components/ha-textarea";
+import "../../../components/ha-textfield";
 import {
   Condition,
   ManualAutomationConfig,
@@ -14,7 +15,7 @@ import {
 } from "../../../data/automation";
 import { Action, MODES, MODES_MAX } from "../../../data/script";
 import { haStyle } from "../../../resources/styles";
-import { HomeAssistant } from "../../../types";
+import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import "../ha-config-section";
 import "./action/ha-automation-action";
@@ -36,7 +37,7 @@ export class HaManualAutomationEditor extends LitElement {
   protected render() {
     return html`<ha-config-section vertical .isWide=${this.isWide}>
         ${!this.narrow
-          ? html` <span slot="header">${this.config.alias}</span> `
+          ? html`<span slot="header">${this.config.alias}</span>`
           : ""}
         <span slot="introduction">
           ${this.hass.localize(
@@ -45,16 +46,16 @@ export class HaManualAutomationEditor extends LitElement {
         </span>
         <ha-card>
           <div class="card-content">
-            <paper-input
+            <ha-textfield
               .label=${this.hass.localize(
                 "ui.panel.config.automation.editor.alias"
               )}
               name="alias"
-              .value=${this.config.alias}
-              @value-changed=${this._valueChanged}
+              .value=${this.config.alias || ""}
+              @change=${this._valueChanged}
             >
-            </paper-input>
-            <paper-textarea
+            </ha-textfield>
+            <ha-textarea
               .label=${this.hass.localize(
                 "ui.panel.config.automation.editor.description.label"
               )}
@@ -62,9 +63,9 @@ export class HaManualAutomationEditor extends LitElement {
                 "ui.panel.config.automation.editor.description.placeholder"
               )}
               name="description"
-              .value=${this.config.description}
-              @value-changed=${this._valueChanged}
-            ></paper-textarea>
+              .value=${this.config.description || ""}
+              @change=${this._valueChanged}
+            ></ha-textarea>
             <p>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.modes.description",
@@ -98,16 +99,18 @@ export class HaManualAutomationEditor extends LitElement {
               )}
             </mwc-select>
             ${this.config.mode && MODES_MAX.includes(this.config.mode)
-              ? html`<paper-input
-                  .label=${this.hass.localize(
-                    `ui.panel.config.automation.editor.max.${this.config.mode}`
-                  )}
-                  type="number"
-                  name="max"
-                  .value=${this.config.max || "10"}
-                  @value-changed=${this._valueChanged}
-                >
-                </paper-input>`
+              ? html`
+                  <ha-textfield
+                    .label=${this.hass.localize(
+                      `ui.panel.config.automation.editor.max.${this.config.mode}`
+                    )}
+                    type="number"
+                    name="max"
+                    .value=${this.config.max || "10"}
+                    @change=${this._valueChanged}
+                  >
+                  </ha-textfield>
+                `
               : html``}
           </div>
           ${this.stateObj
@@ -243,7 +246,7 @@ export class HaManualAutomationEditor extends LitElement {
     if (!name) {
       return;
     }
-    let newVal = ev.detail.value;
+    let newVal = target.value;
     if (target.type === "number") {
       newVal = Number(newVal);
     }
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index 9103ab5540..ecf1f1a4b7 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -14,6 +14,7 @@ import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
 import "../../../../components/ha-alert";
+import "../../../../components/ha-textfield";
 import "../../../../components/ha-icon-button";
 import type { Trigger } from "../../../../data/automation";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -200,14 +201,14 @@ export default class HaAutomationTriggerRow extends LitElement {
 
                 ${showId
                   ? html`
-                      <paper-input
+                      <ha-textfield
                         .label=${this.hass.localize(
                           "ui.panel.config.automation.editor.triggers.id"
                         )}
-                        .value=${this.trigger.id}
-                        @value-changed=${this._idChanged}
+                        .value=${this.trigger.id || ""}
+                        @change=${this._idChanged}
                       >
-                      </paper-input>
+                      </ha-textfield>
                     `
                   : ""}
                 <div @ui-mode-not-available=${this._handleUiModeNotAvailable}>
@@ -287,7 +288,7 @@ export default class HaAutomationTriggerRow extends LitElement {
   }
 
   private _idChanged(ev: CustomEvent) {
-    const newId = ev.detail.value;
+    const newId = (ev.target as any).value;
     if (newId === (this.trigger.id ?? "")) {
       return;
     }
@@ -333,7 +334,11 @@ export default class HaAutomationTriggerRow extends LitElement {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }
         mwc-select {
-          margin-bottom: 16px;
+          margin-bottom: 24px;
+        }
+        ha-textfield {
+          display: block;
+          margin-bottom: 24px;
         }
       `,
     ];
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
index 6804fb8787..5c191e76db 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
@@ -1,7 +1,7 @@
-import "@polymer/paper-input/paper-input";
-import { html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-textfield";
 import "../../../../../components/ha-yaml-editor";
 import "../../../../../components/user/ha-users-picker";
 import { EventTrigger } from "../../../../../data/automation";
@@ -24,14 +24,14 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
   protected render() {
     const { event_type, event_data, context } = this.trigger;
     return html`
-      <paper-input
+      <ha-textfield
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.event.event_type"
         )}
         name="event_type"
         .value=${event_type}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
+        @change=${this._valueChanged}
+      ></ha-textfield>
       <ha-yaml-editor
         .hass=${this.hass}
         .label=${this.hass.localize(
@@ -97,6 +97,14 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
       value,
     });
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-textfield {
+        display: block;
+      }
+    `;
+  }
 }
 
 declare global {