Add select box component (#24370)

* Add select box component * Add selector support * Use it in markdown card * Add select box to gallery * Feedbacks
2025-07-24 09:46:36 +00:00 · 2025-02-24 15:07:51 +01:00 · 2025-02-24 15:07:51 +01:00 · fc4996412e
commit fc4996412e
parent ece4a6345f
12 changed files with 437 additions and 5 deletions
--- a/gallery/public/images/select_box/card.svg
+++ b/gallery/public/images/select_box/card.svg
@ -0,0 +1,10 @@
+<svg width="94" height="64" viewBox="0 0 94 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="94" height="64" rx="8" fill="white"/>
+<rect x="0.5" y="0.5" width="93" height="63" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="black" fill-opacity="0.32"/>
+<path d="M8 27C8 25.3431 9.34315 24 11 24H31C32.6569 24 34 25.3431 34 27V29C34 30.6569 32.6569 32 31 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="black" fill-opacity="0.12"/>
+<path d="M38 27C38 25.3431 39.3431 24 41 24H83C84.6569 24 86 25.3431 86 27V29C86 30.6569 84.6569 32 83 32H41C39.3431 32 38 30.6569 38 29V27Z" fill="black" fill-opacity="0.12"/>
+<path d="M8 39C8 37.3431 9.34315 36 11 36H53C54.6569 36 56 37.3431 56 39V41C56 42.6569 54.6569 44 53 44H11C9.34315 44 8 42.6569 8 41V39Z" fill="black" fill-opacity="0.12"/>
+<path d="M60 39C60 37.3431 61.3431 36 63 36H83C84.6569 36 86 37.3431 86 39V41C86 42.6569 84.6569 44 83 44H63C61.3431 44 60 42.6569 60 41V39Z" fill="black" fill-opacity="0.12"/>
+<path d="M8 51C8 49.3431 9.34315 48 11 48H31C32.6569 48 34 49.3431 34 51V53C34 54.6569 32.6569 56 31 56H11C9.34315 56 8 54.6569 8 53V51Z" fill="black" fill-opacity="0.12"/>
+</svg>
--- a/gallery/public/images/select_box/text_only.svg
+++ b/gallery/public/images/select_box/text_only.svg
@ -0,0 +1,7 @@
+<svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11C0 9.34315 1.34315 8 3 8H23C24.6569 8 26 9.34315 26 11V13C26 14.6569 24.6569 16 23 16H3C1.34315 16 0 14.6569 0 13V11Z" fill="black" fill-opacity="0.12"/>
+<path d="M30 11C30 9.34315 31.3431 8 33 8H91C92.6569 8 94 9.34315 94 11V13C94 14.6569 92.6569 16 91 16H33C31.3431 16 30 14.6569 30 13V11Z" fill="black" fill-opacity="0.12"/>
+<path d="M0 23C0 21.3431 1.34315 20 3 20H61C62.6569 20 64 21.3431 64 23V25C64 26.6569 62.6569 28 61 28H3C1.34315 28 0 26.6569 0 25V23Z" fill="black" fill-opacity="0.12"/>
+<path d="M68 23C68 21.3431 69.3431 20 71 20H91C92.6569 20 94 21.3431 94 23V25C94 26.6569 92.6569 28 91 28H71C69.3431 28 68 26.6569 68 25V23Z" fill="black" fill-opacity="0.12"/>
+<path d="M0 35C0 33.3431 1.34315 32 3 32H23C24.6569 32 26 33.3431 26 35V37C26 38.6569 24.6569 40 23 40H3C1.34315 40 0 38.6569 0 37V35Z" fill="black" fill-opacity="0.12"/>
+</svg>
--- a/gallery/src/pages/components/ha-select-box.markdown
+++ b/gallery/src/pages/components/ha-select-box.markdown
@ -0,0 +1,3 @@
+---
+title: Select box
+---
--- a/gallery/src/pages/components/ha-select-box.ts
+++ b/gallery/src/pages/components/ha-select-box.ts
@ -0,0 +1,152 @@
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-select-box";
+import type { SelectBoxOption } from "../../../../src/components/ha-select-box";
+
+const basicOptions: SelectBoxOption[] = [
+  {
+    value: "text-only",
+    label: "Text only",
+  },
+  {
+    value: "card",
+    label: "Card",
+  },
+  {
+    value: "disabled",
+    label: "Disabled option",
+    disabled: true,
+  },
+];
+
+const fullOptions: SelectBoxOption[] = [
+  {
+    value: "text-only",
+    label: "Text only",
+    description: "Only text, no border and background",
+    image: "/images/select_box/text_only.svg",
+  },
+  {
+    value: "card",
+    label: "Card",
+    description: "With border and background",
+    image: "/images/select_box/card.svg",
+  },
+  {
+    value: "disabled",
+    label: "Disabled",
+    description: "Option that can not be selected",
+    disabled: true,
+  },
+];
+
+const selects: {
+  id: string;
+  label: string;
+  class?: string;
+  options: SelectBoxOption[];
+  disabled?: boolean;
+}[] = [
+  {
+    id: "basic",
+    label: "Basic",
+    options: basicOptions,
+  },
+  {
+    id: "full",
+    label: "With description and image",
+    options: fullOptions,
+  },
+];
+
+@customElement("demo-components-ha-select-box")
+export class DemoHaSelectBox extends LitElement {
+  @state() private value?: string = "off";
+
+  handleValueChanged(e: CustomEvent) {
+    this.value = e.detail.value as string;
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      ${repeat(selects, (select) => {
+        const { id, label, options } = select;
+        return html`
+          <ha-card>
+            <div class="card-content">
+              <label id=${id}>${label}</label>
+              <ha-select-box
+                .value=${this.value}
+                .options=${options}
+                @value-changed=${this.handleValueChanged}
+              >
+              </ha-select-box>
+            </div>
+          </ha-card>
+        `;
+      })}
+      <ha-card>
+        <div class="card-content">
+          <p class="title"><b>Column layout</b></p>
+          <div class="vertical-selects">
+            ${repeat(selects, (select) => {
+              const { options } = select;
+              return html`
+                <ha-select-box
+                  .value=${this.value}
+                  .options=${options}
+                  .maxColumns=${1}
+                  @value-changed=${this.handleValueChanged}
+                >
+                </ha-select-box>
+              `;
+            })}
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    pre {
+      margin-top: 0;
+      margin-bottom: 8px;
+    }
+    p {
+      margin: 0;
+    }
+    label {
+      font-weight: 600;
+      margin-bottom: 8px;
+      display: block;
+    }
+    .custom {
+      --mdc-icon-size: 24px;
+      --control-select-color: var(--state-fan-active-color);
+      --control-select-thickness: 130px;
+      --control-select-border-radius: 36px;
+    }
+
+    p.title {
+      margin-bottom: 12px;
+    }
+
+    .vertical-selects ha-select-box {
+      display: block;
+      margin-bottom: 24px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-select-box": DemoHaSelectBox;
+  }
+}
--- a/public/static/images/form/markdown_card.svg
+++ b/public/static/images/form/markdown_card.svg
@ -0,0 +1,10 @@
+<svg width="94" height="64" viewBox="0 0 94 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="94" height="64" rx="8" fill="white"/>
+<rect x="0.5" y="0.5" width="93" height="63" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="black" fill-opacity="0.32"/>
+<path d="M8 27C8 25.3431 9.34315 24 11 24H31C32.6569 24 34 25.3431 34 27V29C34 30.6569 32.6569 32 31 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="black" fill-opacity="0.12"/>
+<path d="M38 27C38 25.3431 39.3431 24 41 24H83C84.6569 24 86 25.3431 86 27V29C86 30.6569 84.6569 32 83 32H41C39.3431 32 38 30.6569 38 29V27Z" fill="black" fill-opacity="0.12"/>
+<path d="M8 39C8 37.3431 9.34315 36 11 36H53C54.6569 36 56 37.3431 56 39V41C56 42.6569 54.6569 44 53 44H11C9.34315 44 8 42.6569 8 41V39Z" fill="black" fill-opacity="0.12"/>
+<path d="M60 39C60 37.3431 61.3431 36 63 36H83C84.6569 36 86 37.3431 86 39V41C86 42.6569 84.6569 44 83 44H63C61.3431 44 60 42.6569 60 41V39Z" fill="black" fill-opacity="0.12"/>
+<path d="M8 51C8 49.3431 9.34315 48 11 48H31C32.6569 48 34 49.3431 34 51V53C34 54.6569 32.6569 56 31 56H11C9.34315 56 8 54.6569 8 53V51Z" fill="black" fill-opacity="0.12"/>
+</svg>
--- a/public/static/images/form/markdown_card_dark.svg
+++ b/public/static/images/form/markdown_card_dark.svg
@ -0,0 +1,10 @@
+<svg width="94" height="64" viewBox="0 0 94 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H86C90.4183 0 94 3.58172 94 8V56C94 60.4183 90.4183 64 86 64H8C3.58172 64 0 60.4183 0 56V8Z" fill="black"/>
+<path d="M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5H86C90.1421 0.5 93.5 3.85786 93.5 8V56C93.5 60.1421 90.1421 63.5 86 63.5H8C3.85786 63.5 0.5 60.1421 0.5 56V8Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="white" fill-opacity="0.48"/>
+<path d="M8 27C8 25.3431 9.34315 24 11 24H31C32.6569 24 34 25.3431 34 27V29C34 30.6569 32.6569 32 31 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="white" fill-opacity="0.24"/>
+<path d="M38 27C38 25.3431 39.3431 24 41 24H83C84.6569 24 86 25.3431 86 27V29C86 30.6569 84.6569 32 83 32H41C39.3431 32 38 30.6569 38 29V27Z" fill="white" fill-opacity="0.24"/>
+<path d="M8 39C8 37.3431 9.34315 36 11 36H53C54.6569 36 56 37.3431 56 39V41C56 42.6569 54.6569 44 53 44H11C9.34315 44 8 42.6569 8 41V39Z" fill="white" fill-opacity="0.24"/>
+<path d="M60 39C60 37.3431 61.3431 36 63 36H83C84.6569 36 86 37.3431 86 39V41C86 42.6569 84.6569 44 83 44H63C61.3431 44 60 42.6569 60 41V39Z" fill="white" fill-opacity="0.24"/>
+<path d="M8 51C8 49.3431 9.34315 48 11 48H31C32.6569 48 34 49.3431 34 51V53C34 54.6569 32.6569 56 31 56H11C9.34315 56 8 54.6569 8 53V51Z" fill="white" fill-opacity="0.24"/>
+</svg>
--- a/public/static/images/form/markdown_text_only.svg
+++ b/public/static/images/form/markdown_text_only.svg
@ -0,0 +1,7 @@
+<svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11C0 9.34315 1.34315 8 3 8H23C24.6569 8 26 9.34315 26 11V13C26 14.6569 24.6569 16 23 16H3C1.34315 16 0 14.6569 0 13V11Z" fill="black" fill-opacity="0.12"/>
+<path d="M30 11C30 9.34315 31.3431 8 33 8H91C92.6569 8 94 9.34315 94 11V13C94 14.6569 92.6569 16 91 16H33C31.3431 16 30 14.6569 30 13V11Z" fill="black" fill-opacity="0.12"/>
+<path d="M0 23C0 21.3431 1.34315 20 3 20H61C62.6569 20 64 21.3431 64 23V25C64 26.6569 62.6569 28 61 28H3C1.34315 28 0 26.6569 0 25V23Z" fill="black" fill-opacity="0.12"/>
+<path d="M68 23C68 21.3431 69.3431 20 71 20H91C92.6569 20 94 21.3431 94 23V25C94 26.6569 92.6569 28 91 28H71C69.3431 28 68 26.6569 68 25V23Z" fill="black" fill-opacity="0.12"/>
+<path d="M0 35C0 33.3431 1.34315 32 3 32H23C24.6569 32 26 33.3431 26 35V37C26 38.6569 24.6569 40 23 40H3C1.34315 40 0 38.6569 0 37V35Z" fill="black" fill-opacity="0.12"/>
+</svg>
--- a/public/static/images/form/markdown_text_only_dark.svg
+++ b/public/static/images/form/markdown_text_only_dark.svg
@ -0,0 +1,7 @@
+<svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11C0 9.34315 1.34315 8 3 8H23C24.6569 8 26 9.34315 26 11V13C26 14.6569 24.6569 16 23 16H3C1.34315 16 0 14.6569 0 13V11Z" fill="white" fill-opacity="0.24"/>
+<path d="M30 11C30 9.34315 31.3431 8 33 8H91C92.6569 8 94 9.34315 94 11V13C94 14.6569 92.6569 16 91 16H33C31.3431 16 30 14.6569 30 13V11Z" fill="white" fill-opacity="0.24"/>
+<path d="M0 23C0 21.3431 1.34315 20 3 20H61C62.6569 20 64 21.3431 64 23V25C64 26.6569 62.6569 28 61 28H3C1.34315 28 0 26.6569 0 25V23Z" fill="white" fill-opacity="0.24"/>
+<path d="M68 23C68 21.3431 69.3431 20 71 20H91C92.6569 20 94 21.3431 94 23V25C94 26.6569 92.6569 28 91 28H71C69.3431 28 68 26.6569 68 25V23Z" fill="white" fill-opacity="0.24"/>
+<path d="M0 35C0 33.3431 1.34315 32 3 32H23C24.6569 32 26 33.3431 26 35V37C26 38.6569 24.6569 40 23 40H3C1.34315 40 0 38.6569 0 37V35Z" fill="white" fill-opacity="0.24"/>
+</svg>
--- a/src/components/ha-select-box.ts
+++ b/src/components/ha-select-box.ts
@ -0,0 +1,193 @@
+import { customElement, property } from "lit/decorators";
+import { css, html, LitElement, nothing } from "lit";
+import "./ha-radio";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
+import type { HaRadio } from "./ha-radio";
+import { fireEvent } from "../common/dom/fire_event";
+
+export interface SelectBoxOption {
+  label?: string;
+  description?: string;
+  image?: string;
+  value: string;
+  disabled?: boolean;
+}
+
+@customElement("ha-select-box")
+export class HaSelectBox extends LitElement {
+  @property({ attribute: false }) public options: SelectBoxOption[] = [];
+
+  @property({ attribute: false }) public value?: string;
+
+  @property({ type: Boolean }) public disabled?: boolean;
+
+  @property({ type: Number, attribute: "max_columns" })
+  public maxColumns?: number;
+
+  render() {
+    const maxColumns = this.maxColumns ?? 3;
+    const columns = Math.min(maxColumns, this.options.length);
+
+    return html`
+      <div class="list" style=${styleMap({ "--columns": columns })}>
+        ${this.options.map((option) => this._renderOption(option))}
+      </div>
+    `;
+  }
+
+  private _renderOption(option: SelectBoxOption) {
+    const horizontal = this.maxColumns === 1;
+    const disabled = option.disabled || this.disabled || false;
+    const selected = option.value === this.value;
+    return html`
+      <label
+        class="option ${classMap({
+          horizontal: horizontal,
+          selected: selected,
+        })}"
+        ?disabled=${disabled}
+        @click=${this._labelClick}
+      >
+        <div class="content">
+          <ha-radio
+            .checked=${option.value === this.value}
+            .value=${option.value}
+            .disabled=${disabled}
+            @change=${this._radioChanged}
+          ></ha-radio>
+          <div class="text">
+            <span class="label">${option.label}</span>
+            ${option.description
+              ? html`<span class="description">${option.description}</span>`
+              : nothing}
+          </div>
+        </div>
+        ${option.image ? html`<img alt="" src=${option.image} />` : nothing}
+      </label>
+    `;
+  }
+
+  private _labelClick(ev) {
+    ev.stopPropagation();
+    ev.currentTarget.querySelector("ha-radio")?.click();
+  }
+
+  private _radioChanged(ev: CustomEvent) {
+    const radio = ev.currentTarget as HaRadio;
+    const value = radio.value;
+    if (this.disabled || value === undefined || value === (this.value ?? "")) {
+      return;
+    }
+    fireEvent(this, "value-changed", {
+      value: value,
+    });
+  }
+
+  static styles = css`
+    .list {
+      display: grid;
+      grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
+      gap: 12px;
+    }
+    .option {
+      position: relative;
+      display: block;
+      border: 1px solid var(--divider-color);
+      border-radius: var(--ha-card-border-radius, 12px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px;
+      gap: 8px;
+      overflow: hidden;
+      cursor: pointer;
+    }
+
+    .option .content {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      min-width: 0;
+      width: 100%;
+    }
+    .option .content ha-radio {
+      margin: -12px;
+      flex: none;
+    }
+    .option .content .text {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+      flex: 1;
+    }
+    .option .content .text .label {
+      color: var(--primary-text-color);
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .option .content .text .description {
+      color: var(--secondary-text-color);
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 16px;
+    }
+    img {
+      position: relative;
+      max-width: var(--ha-select-box-image-size, 96px);
+      max-height: var(--ha-select-box-image-size, 96px);
+      margin: auto;
+    }
+
+    .option.horizontal {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    .option.horizontal img {
+      margin: 0;
+    }
+
+    .option:before {
+      content: "";
+      display: block;
+      inset: 0;
+      position: absolute;
+      background-color: transparent;
+      pointer-events: none;
+      opacity: 0.2;
+      transition:
+        background-color 180ms ease-in-out,
+        opacity 180ms ease-in-out;
+    }
+    .option:hover:before {
+      background-color: var(--divider-color);
+    }
+    .option.selected:before {
+      background-color: var(--primary-color);
+    }
+    .option[disabled] {
+      cursor: not-allowed;
+    }
+    .option[disabled] .content,
+    .option[disabled] img {
+      opacity: 0.5;
+    }
+    .option[disabled]:before {
+      background-color: var(--disabled-color);
+      opacity: 0.05;
+    }
+  `;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-select-box": HaSelectBox;
+  }
+}
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@ -19,6 +19,7 @@ import "../ha-input-helper-text";
 import "../ha-radio";
 import "../ha-select";
 import "../ha-sortable";
+import "../ha-select-box";

@customElement("ha-selector-select")
 export class HaSelectSelector extends LitElement {
@ -91,6 +92,24 @@ export class HaSelectSelector extends LitElement {
      );
    }

+    if (
+      !this.selector.select?.multiple &&
+      !this.selector.select?.reorder &&
+      !this.selector.select?.custom_value &&
+      this._mode === "box"
+    ) {
+      return html`
+        ${this.label ? html`<span class="label">${this.label}</span>` : nothing}
+        <ha-select-box
+          .options=${options}
+          .value=${this.value as string | undefined}
+          @value-changed=${this._valueChanged}
+          .maxColumns=${this.selector.select?.box_max_columns}
+        ></ha-select-box>
+        ${this._renderHelper()}
+      `;
+    }
+
    if (
      !this.selector.select?.custom_value &&
      !this.selector.select?.reorder &&
@ -269,7 +288,7 @@ export class HaSelectSelector extends LitElement {
      : "";
  }

-  private get _mode(): "list" | "dropdown" {
+  private get _mode(): "list" | "dropdown" | "box" {
    return (
      this.selector.select?.mode ||
      ((this.selector.select?.options?.length || 0) < 6 ? "list" : "dropdown")
@ -411,6 +430,15 @@ export class HaSelectSelector extends LitElement {
      padding: 8px 0;
    }

+    .label {
+      display: block;
+      margin: 0 0 8px;
+    }
+
+    ha-select-box + ha-input-helper-text {
+      margin-top: 4px;
+    }
+
    .sortable-fallback {
      display: none;
      opacity: 0;
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@ -346,6 +346,8 @@ export interface AssistPipelineSelector {
 export interface SelectOption {
  value: any;
  label: string;
+  description?: string;
+  image?: string;
  disabled?: boolean;
 }

@ -353,11 +355,12 @@ export interface SelectSelector {
  select: {
    multiple?: boolean;
    custom_value?: boolean;
-    mode?: "list" | "dropdown";
+    mode?: "list" | "dropdown" | "box";
    options: readonly string[] | readonly SelectOption[];
    translation_key?: string;
    sort?: boolean;
    reorder?: boolean;
+    box_max_columns?: number;
  } | null;
 }

--- a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
@ -38,18 +38,19 @@ export class HuiMarkdownCardEditor
  }

  private _schema = memoizeOne(
-    (localize: LocalizeFunc, text_only: boolean) =>
+    (localize: LocalizeFunc, text_only: boolean, isDark: boolean) =>
      [
        {
          name: "style",
          required: true,
          selector: {
            select: {
-              mode: "dropdown",
+              mode: "box",
              options: ["card", "text-only"].map((style) => ({
                label: localize(
                  `ui.panel.lovelace.editor.card.markdown.style_options.${style}`
                ),
+                image: `/static/images/form/markdown_${style.replace("-", "_")}${isDark ? "_dark" : ""}.svg`,
                value: style,
              })),
            },
@ -74,7 +75,8 @@ export class HuiMarkdownCardEditor

    const schema = this._schema(
      this.hass.localize,
-      this._config.text_only || false
+      this._config.text_only || false,
+      this.hass.themes.darkMode
    );

    return html`