diff --git a/src/components/ha-selector/ha-selector-trigger.ts b/src/components/ha-selector/ha-selector-trigger.ts
new file mode 100644
index 0000000000..1f9213aa91
--- /dev/null
+++ b/src/components/ha-selector/ha-selector-trigger.ts
@@ -0,0 +1,56 @@
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { Trigger } from "../../data/automation";
+import { TriggerSelector } from "../../data/selector";
+import "../../panels/config/automation/trigger/ha-automation-trigger";
+import { HomeAssistant } from "../../types";
+
+@customElement("ha-selector-trigger")
+export class HaTriggerSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: TriggerSelector;
+
+  @property() public value?: Trigger;
+
+  @property() public label?: string;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  protected render() {
+    return html`
+      ${this.label ? html`<label>${this.label}</label>` : nothing}
+      <ha-automation-trigger
+        .disabled=${this.disabled}
+        .triggers=${this.value || []}
+        .hass=${this.hass}
+        .nested=${this.selector.trigger?.nested}
+        .reOrderMode=${this.selector.trigger?.reorder_mode}
+      ></ha-automation-trigger>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-automation-trigger {
+        display: block;
+        margin-bottom: 16px;
+      }
+      :host([disabled]) ha-automation-trigger {
+        opacity: var(--light-disabled-opacity);
+        pointer-events: none;
+      }
+      label {
+        display: block;
+        margin-bottom: 4px;
+        font-weight: 500;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-trigger": HaTriggerSelector;
+  }
+}
diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts
index a69fab2157..3bfbb7741e 100644
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -44,6 +44,7 @@ const LOAD_ELEMENTS = {
   icon: () => import("./ha-selector-icon"),
   media: () => import("./ha-selector-media"),
   theme: () => import("./ha-selector-theme"),
+  trigger: () => import("./ha-selector-trigger"),
   tts: () => import("./ha-selector-tts"),
   tts_voice: () => import("./ha-selector-tts-voice"),
   location: () => import("./ha-selector-location"),
diff --git a/src/data/selector.ts b/src/data/selector.ts
index aaa0a23c0f..f7a8b922e2 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -49,6 +49,7 @@ export type Selector =
   | TemplateSelector
   | ThemeSelector
   | TimeSelector
+  | TriggerSelector
   | TTSSelector
   | TTSVoiceSelector
   | UiActionSelector
@@ -373,6 +374,13 @@ export interface TimeSelector {
   time: {} | null;
 }
 
+export interface TriggerSelector {
+  trigger: {
+    reorder_mode?: boolean;
+    nested?: boolean;
+  } | null;
+}
+
 export interface TTSSelector {
   tts: { language?: string } | null;
 }