diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts
index 2ea007d913..4408191b20 100644
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -184,6 +184,7 @@ const SCHEMAS: {
name: "Multiples",
input: {
entity: { name: "Entity", selector: { entity: { multiple: true } } },
+ device: { name: "Device", selector: { device: { multiple: true } } },
},
},
];
diff --git a/src/components/device/ha-devices-picker.ts b/src/components/device/ha-devices-picker.ts
index 1b437da780..ff975abef5 100644
--- a/src/components/device/ha-devices-picker.ts
+++ b/src/components/device/ha-devices-picker.ts
@@ -1,4 +1,4 @@
-import { html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { PolymerChangedEvent } from "../../polymer-types";
@@ -116,6 +116,12 @@ class HaDevicesPicker extends LitElement {
this._updateDevices([...currentDevices, toAdd]);
}
+
+ static override styles = css`
+ div {
+ margin-top: 8px;
+ }
+ `;
}
declare global {
diff --git a/src/components/ha-selector/ha-selector-device.ts b/src/components/ha-selector/ha-selector-device.ts
index 60da624665..2b0af5ace1 100644
--- a/src/components/ha-selector/ha-selector-device.ts
+++ b/src/components/ha-selector/ha-selector-device.ts
@@ -1,10 +1,11 @@
import { html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
-import { DeviceRegistryEntry } from "../../data/device_registry";
-import { DeviceSelector } from "../../data/selector";
-import { HomeAssistant } from "../../types";
+import type { DeviceRegistryEntry } from "../../data/device_registry";
+import type { DeviceSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
import "../device/ha-device-picker";
+import "../device/ha-devices-picker";
@customElement("ha-selector-device")
export class HaDeviceSelector extends LitElement {
@@ -30,20 +31,36 @@ export class HaDeviceSelector extends LitElement {
}
protected render() {
- return html``;
+ if (!this.selector.device.multiple) {
+ return html` `;
+ }
+
+ return html`
+ ${this.label ? html`` : ""}
+
+ `;
}
private _filterDevices = (device: DeviceRegistryEntry): boolean => {
diff --git a/src/data/selector.ts b/src/data/selector.ts
index 8d8c062b08..ce84b86fbc 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -49,6 +49,7 @@ export interface DeviceSelector {
domain?: EntitySelector["entity"]["domain"];
device_class?: EntitySelector["entity"]["device_class"];
};
+ multiple?: boolean;
};
}