Update Pickers and selectors with required (#12151)

* Update Pickers and selectors with required

* Use native * for device and entity

gallery/src/pages/components/ha-selector.ts

@@ -363,9 +363,11 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                       <span slot="heading">${value?.name || key}</span>
                       <span slot="description">${value?.description}</span>
                       <ha-selector
+                        .required=${true}
                         .hass=${this.hass}
                         .selector=${value!.selector}
                         .key=${key}
+                        .label=${value?.name || key}
                         .value=${data[key] ?? value!.default}
                         @value-changed=${valueChanged}
                       ></ha-selector>

src/components/device/ha-device-picker.ts

@@ -86,6 +86,8 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
+  @property({ type: Boolean }) public required?: boolean;
+
   @state() private _opened?: boolean;
 
   @query("ha-combo-box", true) public comboBox!: HaComboBox;
@@ -269,6 +271,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
         .value=${this._value}
         .renderer=${rowRenderer}
         .disabled=${this.disabled}
+        .required=${this.required}
         item-value-path="id"
         item-label-path="name"
         @opened-changed=${this._openedChanged}

src/components/device/ha-devices-picker.ts

@@ -11,6 +11,8 @@ class HaDevicesPicker extends LitElement {
 
   @property() public value?: string[];
 
+  @property({ type: Boolean }) public required?: boolean;
+
   /**
    * Show entities from specific domains.
    * @type {string}
@@ -66,6 +68,7 @@ class HaDevicesPicker extends LitElement {
           .excludeDomains=${this.excludeDomains}
           .includeDeviceClasses=${this.includeDeviceClasses}
           .label=${this.pickDeviceLabel}
+          .required=${this.required}
           @value-changed=${this._addDevice}
         ></ha-device-picker>
       </div>

src/components/entity/ha-entities-picker.ts

@@ -14,6 +14,8 @@ class HaEntitiesPickerLight extends LitElement {
 
   @property({ type: Array }) public value?: string[];
 
+  @property({ type: Boolean }) public required?: boolean;
+
   /**
    * Show entities from specific domains.
    * @type {string}
@@ -108,6 +110,7 @@ class HaEntitiesPickerLight extends LitElement {
           .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
           .entityFilter=${this._entityFilter}
           .label=${this.pickEntityLabel}
+          .required=${this.required}
           @value-changed=${this._addEntity}
         ></ha-entity-picker>
       </div>

src/components/entity/ha-entity-attribute-picker.ts

@@ -19,6 +19,8 @@ class HaEntityAttributePicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = false;
+
   @property({ type: Boolean, attribute: "allow-custom-value" })
   public allowCustomValue;
 
@@ -61,6 +63,7 @@ class HaEntityAttributePicker extends LitElement {
           "ui.components.entity.entity-attribute-picker.attribute"
         )}
         .disabled=${this.disabled || !this.entityId}
+        .required=${this.required}
         .allowCustomValue=${this.allowCustomValue}
         item-value-path="value"
         item-label-path="label"

src/components/entity/ha-entity-picker.ts

@@ -39,6 +39,8 @@ export class HaEntityPicker extends LitElement {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
+  @property({ type: Boolean }) public required?: boolean;
+
   @property({ type: Boolean, attribute: "allow-custom-entity" })
   public allowCustomEntity;
 
@@ -305,6 +307,7 @@ export class HaEntityPicker extends LitElement {
         .allowCustomValue=${this.allowCustomEntity}
         .filteredItems=${this._states}
         .renderer=${rowRenderer}
+        .required=${this.required}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
         @filter-changed=${this._filterChanged}

src/components/ha-addon-picker.ts

@@ -30,6 +30,8 @@ class HaAddonPicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = false;
+
   @query("ha-combo-box") private _comboBox!: HaComboBox;
 
   public open() {
@@ -55,6 +57,8 @@ class HaAddonPicker extends LitElement {
           ? this.hass.localize("ui.components.addon-picker.addon")
           : this.label}
         .value=${this._value}
+        .required=${this.required}
+        .disabled=${this.disabled}
         .renderer=${rowRenderer}
         .items=${this._addons}
         item-value-path="slug"

src/components/ha-area-picker.ts

@@ -28,8 +28,8 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import type { HaComboBox } from "./ha-combo-box";
 import "./ha-combo-box";
+import type { HaComboBox } from "./ha-combo-box";
 import "./ha-icon-button";
 import "./ha-svg-icon";
 
@@ -84,6 +84,8 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
+  @property({ type: Boolean }) public required?: boolean;
+
   @state() private _areas?: AreaRegistryEntry[];
 
   @state() private _devices?: DeviceRegistryEntry[];
@@ -315,6 +317,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
         item-label-path="name"
         .value=${this.value}
         .disabled=${this.disabled}
+        .required=${this.required}
         .label=${this.label === undefined && this.hass
           ? this.hass.localize("ui.components.area-picker.area")
           : this.label}

src/components/ha-areas-picker.ts

@@ -56,6 +56,8 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
+  @property({ type: Boolean }) public required?: boolean;
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
@@ -95,6 +97,7 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
           .entityFilter=${this.entityFilter}
           .disabled=${this.disabled}
           .placeholder=${this.placeholder}
+          .required=${this.required}
           @value-changed=${this._addArea}
         ></ha-area-picker>
       </div>

src/components/ha-base-time-input.ts

@@ -129,7 +129,9 @@ export class HaBaseTimeInput extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      ${this.label ? html`<label>${this.label}</label>` : ""}
+      ${this.label
+        ? html`<label>${this.label}${this.required ? "*" : ""}</label>`
+        : ""}
       <div class="time-input-wrap">
         ${this.enableDay
           ? html`

src/components/ha-combo-box.ts

@@ -87,6 +87,8 @@ export class HaComboBox extends LitElement {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
+  @property({ type: Boolean }) public required?: boolean;
+
   @property({ type: Boolean, reflect: true, attribute: "opened" })
   private _opened?: boolean;
 
@@ -119,6 +121,7 @@ export class HaComboBox extends LitElement {
         .filteredItems=${this.filteredItems}
         .allowCustomValue=${this.allowCustomValue}
         .disabled=${this.disabled}
+        .required=${this.required}
         ${comboBoxRenderer(this.renderer || this._defaultRowRenderer)}
         @opened-changed=${this._openedChanged}
         @filter-changed=${this._filterChanged}
@@ -129,6 +132,7 @@ export class HaComboBox extends LitElement {
           .label=${this.label}
           .placeholder=${this.placeholder}
           .disabled=${this.disabled}
+          .required=${this.required}
           .validationMessage=${this.validationMessage}
           .errorMessage=${this.errorMessage}
           class="input"

src/components/ha-date-input.ts

@@ -35,6 +35,8 @@ export class HaDateInput extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = false;
+
   @property() public label?: string;
 
   render() {
@@ -46,6 +48,7 @@ export class HaDateInput extends LitElement {
       .value=${this.value
         ? formatDateNumeric(new Date(this.value), this.locale)
         : ""}
+      .required=${this.required}
     >
       <ha-svg-icon slot="trailingIcon" .path=${mdiCalendar}></ha-svg-icon>
     </ha-textfield>`;

src/components/ha-icon-picker.ts

@@ -39,6 +39,8 @@ export class HaIconPicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = false;
+
   @property({ type: Boolean }) public invalid = false;
 
   @state() private _opened = false;
@@ -56,6 +58,7 @@ export class HaIconPicker extends LitElement {
         .filteredItems=${iconItems}
         .label=${this.label}
         .disabled=${this.disabled}
+        .required=${this.required}
         .placeholder=${this.placeholder}
         .errorMessage=${this.errorMessage}
         .invalid=${this.invalid}

src/components/ha-labeled-slider.js

@@ -33,7 +33,7 @@ class HaLabeledSlider extends PolymerElement {
         }
       </style>
 
-      <div class="title">[[caption]]</div>
+      <div class="title">[[_getTitle()]]</div>
       <div class="extra-container"><slot name="extra"></slot></div>
       <div class="slider-container">
         <ha-icon icon="[[icon]]" hidden$="[[!icon]]"></ha-icon>
@@ -49,10 +49,15 @@ class HaLabeledSlider extends PolymerElement {
     `;
   }
 
+  _getTitle() {
+    return `${this.caption}${this.required ? "*" : ""}`;
+  }
+
   static get properties() {
     return {
       caption: String,
       disabled: Boolean,
+      required: Boolean,
       min: Number,
       max: Number,
       pin: Boolean,

src/components/ha-selector/ha-selector-addon.ts

@@ -14,11 +14,17 @@ export class HaAddonSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
   protected render() {
     return html`<ha-addon-picker
       .hass=${this.hass}
       .value=${this.value}
       .label=${this.label}
+      .disabled=${this.disabled}
+      .required=${this.required}
       allow-custom-entity
     ></ha-addon-picker>`;
   }

src/components/ha-selector/ha-selector-area.ts

@@ -22,6 +22,8 @@ export class HaAreaSelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   protected updated(changedProperties) {
     if (changedProperties.has("selector")) {
       const oldSelector = changedProperties.get("selector");
@@ -55,6 +57,7 @@ export class HaAreaSelector extends LitElement {
             ? [this.selector.area.entity.domain]
             : undefined}
           .disabled=${this.disabled}
+          .required=${this.required}
         ></ha-area-picker>
       `;
     }
@@ -74,6 +77,7 @@ export class HaAreaSelector extends LitElement {
           ? [this.selector.area.entity.domain]
           : undefined}
         .disabled=${this.disabled}
+        .required=${this.required}
       ></ha-areas-picker>
     `;
   }

src/components/ha-selector/ha-selector-attribute.ts

@@ -1,10 +1,10 @@
-import "../entity/ha-entity-attribute-picker";
 import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
 import { AttributeSelector } from "../../data/selector";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../types";
-import { fireEvent } from "../../common/dom/fire_event";
+import "../entity/ha-entity-attribute-picker";
 
 @customElement("ha-selector-attribute")
 export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
@@ -18,6 +18,8 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   @property() public context?: {
     filter_entity?: string;
   };
@@ -31,6 +33,7 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
         .value=${this.value}
         .label=${this.label}
         .disabled=${this.disabled}
+        .required=${this.required}
         allow-custom-value
       ></ha-entity-attribute-picker>
     `;

src/components/ha-selector/ha-selector-color-rgb.ts

@@ -1,9 +1,9 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { HomeAssistant } from "../../types";
-import type { ColorRGBSelector } from "../../data/selector";
-import { fireEvent } from "../../common/dom/fire_event";
 import { hex2rgb, rgb2hex } from "../../common/color/convert-color";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { ColorRGBSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
 import "../ha-textfield";
 
 @customElement("ha-selector-color_rgb")
@@ -18,12 +18,16 @@ export class HaColorRGBSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   protected render() {
     return html`
       <ha-textfield
         type="color"
         .value=${this.value ? rgb2hex(this.value as any) : ""}
         .label=${this.label || ""}
+        .required=${this.required}
+        .disalbled=${this.disabled}
         @change=${this._valueChanged}
       ></ha-textfield>
     `;

src/components/ha-selector/ha-selector-color-temp.ts

@@ -1,8 +1,8 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { HomeAssistant } from "../../types";
-import type { ColorTempSelector } from "../../data/selector";
 import { fireEvent } from "../../common/dom/fire_event";
+import type { ColorTempSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
 import "../ha-labeled-slider";
 
 @customElement("ha-selector-color_temp")
@@ -17,6 +17,8 @@ export class HaColorTempSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   protected render() {
     return html`
       <ha-labeled-slider
@@ -26,6 +28,8 @@ export class HaColorTempSelector extends LitElement {
         .min=${this.selector.color_temp.min_mireds ?? 153}
         .max=${this.selector.color_temp.max_mireds ?? 500}
         .value=${this.value}
+        .disabled=${this.disabled}
+        .required=${this.required}
         @change=${this._valueChanged}
       ></ha-labeled-slider>
     `;

src/components/ha-selector/ha-selector-date.ts

@@ -1,7 +1,7 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { HomeAssistant } from "../../types";
 import type { DateSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
 import "../ha-date-input";
 
 @customElement("ha-selector-date")
@@ -16,6 +16,8 @@ export class HaDateSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   protected render() {
     return html`
       <ha-date-input
@@ -23,6 +25,7 @@ export class HaDateSelector extends LitElement {
         .locale=${this.hass.locale}
         .disabled=${this.disabled}
         .value=${this.value}
+        .required=${this.required}
       >
       </ha-date-input>
     `;

src/components/ha-selector/ha-selector-datetime.ts

@@ -1,12 +1,12 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import type { HomeAssistant } from "../../types";
-import type { DateTimeSelector } from "../../data/selector";
-import type { HaDateInput } from "../ha-date-input";
-import type { HaTimeInput } from "../ha-time-input";
 import { fireEvent } from "../../common/dom/fire_event";
+import type { DateTimeSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
 import "../ha-date-input";
+import type { HaDateInput } from "../ha-date-input";
 import "../ha-time-input";
+import type { HaTimeInput } from "../ha-time-input";
 
 @customElement("ha-selector-datetime")
 export class HaDateTimeSelector extends LitElement {
@@ -20,6 +20,8 @@ export class HaDateTimeSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   @query("ha-date-input") private _dateInput!: HaDateInput;
 
   @query("ha-time-input") private _timeInput!: HaTimeInput;
@@ -32,6 +34,7 @@ export class HaDateTimeSelector extends LitElement {
         .label=${this.label}
         .locale=${this.hass.locale}
         .disabled=${this.disabled}
+        .required=${this.required}
         .value=${values?.[0]}
         @value-changed=${this._valueChanged}
       >
@@ -41,6 +44,7 @@ export class HaDateTimeSelector extends LitElement {
         .value=${values?.[1] || "0:00:00"}
         .locale=${this.hass.locale}
         .disabled=${this.disabled}
+        .required=${this.required}
         @value-changed=${this._valueChanged}
       ></ha-time-input>
     `;

src/components/ha-selector/ha-selector-device.ts

@@ -21,6 +21,8 @@ export class HaDeviceSelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   protected updated(changedProperties) {
     if (changedProperties.has("selector")) {
       const oldSelector = changedProperties.get("selector");
@@ -36,20 +38,23 @@ export class HaDeviceSelector extends LitElement {
 
   protected render() {
     if (!this.selector.device.multiple) {
-      return html`<ha-device-picker
+      return html`
-        .hass=${this.hass}
+        <ha-device-picker
-        .value=${this.value}
+          .hass=${this.hass}
-        .label=${this.label}
+          .value=${this.value}
-        .deviceFilter=${this._filterDevices}
+          .label=${this.label}
-        .includeDeviceClasses=${this.selector.device.entity?.device_class
+          .deviceFilter=${this._filterDevices}
-          ? [this.selector.device.entity.device_class]
+          .includeDeviceClasses=${this.selector.device.entity?.device_class
-          : undefined}
+            ? [this.selector.device.entity.device_class]
-        .includeDomains=${this.selector.device.entity?.domain
+            : undefined}
-          ? [this.selector.device.entity.domain]
+          .includeDomains=${this.selector.device.entity?.domain
-          : undefined}
+            ? [this.selector.device.entity.domain]
-        .disabled=${this.disabled}
+            : undefined}
-        allow-custom-entity
+          .disabled=${this.disabled}
-      ></ha-device-picker> `;
+          .required=${this.required}
+          allow-custom-entity
+        ></ha-device-picker>
+      `;
     }
 
     return html`
@@ -63,6 +68,7 @@ export class HaDeviceSelector extends LitElement {
         .includeDomains=${this.selector.device.entity?.domain
           ? [this.selector.device.entity.domain]
           : undefined}
+        .required=${this.required}
       ></ha-devices-picker>
     `;
   }

src/components/ha-selector/ha-selector-entity.ts

@@ -25,6 +25,8 @@ export class HaEntitySelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   protected render() {
     if (!this.selector.entity.multiple) {
       return html`<ha-entity-picker
@@ -35,6 +37,7 @@ export class HaEntitySelector extends LitElement {
         .excludeEntities=${this.selector.entity.exclude_entities}
         .entityFilter=${this._filterEntities}
         .disabled=${this.disabled}
+        .required=${this.required}
         allow-custom-entity
       ></ha-entity-picker>`;
     }
@@ -47,6 +50,7 @@ export class HaEntitySelector extends LitElement {
         .entityFilter=${this._filterEntities}
         .includeEntities=${this.selector.entity.include_entities}
         .excludeEntities=${this.selector.entity.exclude_entities}
+        .required=${this.required}
       ></ha-entities-picker>
     `;
   }

src/components/ha-selector/ha-selector-icon.ts

@@ -1,9 +1,9 @@
-import "../ha-icon-picker";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { HomeAssistant } from "../../types";
-import { IconSelector } from "../../data/selector";
 import { fireEvent } from "../../common/dom/fire_event";
+import { IconSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-icon-picker";
 
 @customElement("ha-selector-icon")
 export class HaIconSelector extends LitElement {
@@ -17,11 +17,15 @@ export class HaIconSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   protected render() {
     return html`
       <ha-icon-picker
         .label=${this.label}
         .value=${this.value}
+        .required=${this.required}
+        .disabled=${this.disabled}
         .fallbackPath=${this.selector.icon.fallbackPath}
         .placeholder=${this.selector.icon.placeholder}
         @value-changed=${this._valueChanged}

src/components/ha-selector/ha-selector-media.ts

@@ -35,6 +35,8 @@ export class HaMediaSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
+  @property({ type: Boolean, reflect: true }) public required = true;
+
   @state() private _thumbnailUrl?: string | null;
 
   willUpdate(changedProps: PropertyValues<this>) {
@@ -84,6 +86,7 @@ export class HaMediaSelector extends LitElement {
         .label=${this.label ||
         this.hass.localize("ui.components.selectors.media.pick_media_player")}
         .disabled=${this.disabled}
+        .required=${this.required}
         include-domains='["media_player"]'
         allow-custom-entity
         @value-changed=${this._entityChanged}

src/components/ha-selector/ha-selector-number.ts

@@ -27,7 +27,7 @@ export class HaNumberSelector extends LitElement {
 
   protected render() {
     return html`${this.selector.number.mode !== "box"
-        ? html`${this.label}<ha-slider
+        ? html`${this.label}${this.required ? "*" : ""}<ha-slider
               .min=${this.selector.number.min}
               .max=${this.selector.number.max}
               .value=${this._value}

src/components/ha-selector/ha-selector-object.ts

@@ -16,10 +16,13 @@ export class HaObjectSelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   protected render() {
     return html`<ha-yaml-editor
       .hass=${this.hass}
-      .disabled=${this.disabled}
+      .readonly=${this.disabled}
+      .required=${this.required}
       .placeholder=${this.placeholder}
       .defaultValue=${this.value}
       @value-changed=${this._handleChange}

src/components/ha-selector/ha-selector-select.ts

@@ -6,8 +6,8 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import type { SelectOption, SelectSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
-import "../ha-select";
 import "../ha-radio";
+import "../ha-select";
 
 @customElement("ha-selector-select")
 export class HaSelectSelector extends LitElement {
@@ -57,6 +57,7 @@ export class HaSelectSelector extends LitElement {
         .value=${this.value}
         .helper=${this.helper}
         .disabled=${this.disabled}
+        .required=${this.required}
         @closed=${stopPropagation}
         @selected=${this._valueChanged}
       >

src/components/ha-selector/ha-selector-theme.ts

@@ -1,8 +1,8 @@
-import "../ha-theme-picker";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { HomeAssistant } from "../../types";
 import type { ThemeSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
+import "../ha-theme-picker";
 
 @customElement("ha-selector-theme")
 export class HaThemeSelector extends LitElement {
@@ -16,12 +16,16 @@ export class HaThemeSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   protected render() {
     return html`
       <ha-theme-picker
         .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
+        .disabled=${this.disabled}
+        .required=${this.required}
       ></ha-theme-picker>
     `;
   }

src/components/ha-selector/ha-selector-time.ts

@@ -16,12 +16,15 @@ export class HaTimeSelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = false;
+
   protected render() {
     return html`
       <ha-time-input
         .value=${this.value}
         .locale=${this.hass.locale}
         .disabled=${this.disabled}
+        .required=${this.required}
         .label=${this.label}
         enable-second
       ></ha-time-input>

src/components/ha-theme-picker.ts

@@ -4,8 +4,8 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
-import "./ha-select";
 import { HomeAssistant } from "../types";
+import "./ha-select";
 
 @customElement("ha-theme-picker")
 export class HaThemePicker extends LitElement {
@@ -15,12 +15,18 @@ export class HaThemePicker extends LitElement {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
   protected render(): TemplateResult {
     return html`
       <ha-select
         .label=${this.label ||
         this.hass!.localize("ui.components.theme_picker.theme")}
         .value=${this.value}
+        .required=${this.required}
+        .disabled=${this.disabled}
         @selected=${this._changed}
         @closed=${stopPropagation}
         fixedMenuPosition

src/components/ha-time-input.ts

@@ -2,8 +2,8 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { useAmPm } from "../common/datetime/use_am_pm";
 import { fireEvent } from "../common/dom/fire_event";
-import "./ha-base-time-input";
 import { FrontendLocaleData } from "../data/translation";
+import "./ha-base-time-input";
 import type { TimeChangedEvent } from "./ha-base-time-input";
 
 @customElement("ha-time-input")
@@ -16,6 +16,8 @@ export class HaTimeInput extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = false;
+
   @property({ type: Boolean, attribute: "enable-second" })
   public enableSecond = false;
 
@@ -43,6 +45,7 @@ export class HaTimeInput extends LitElement {
         .disabled=${this.disabled}
         @value-changed=${this._timeChanged}
         .enableSecond=${this.enableSecond}
+        .required=${this.required}
       ></ha-base-time-input>
     `;
   }

src/components/ha-yaml-editor.ts

@@ -33,6 +33,8 @@ export class HaYamlEditor extends LitElement {
 
   @property({ type: Boolean }) public readOnly = false;
 
+  @property({ type: Boolean }) public required = false;
+
   @state() private _yaml = "";
 
   public setValue(value): void {
@@ -59,7 +61,7 @@ export class HaYamlEditor extends LitElement {
       return html``;
     }
     return html`
-      ${this.label ? html`<p>${this.label}</p>` : ""}
+      ${this.label ? html`<p>${this.label}${this.required ? "*" : ""}</p>` : ""}
       <ha-code-editor
         .hass=${this.hass}
         .value=${this._yaml}

src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts

@@ -4,8 +4,8 @@ import { assert } from "superstruct";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-formfield";
-import "../../../../components/ha-textfield";
 import "../../../../components/ha-switch";
+import "../../../../components/ha-textfield";
 import type { HomeAssistant } from "../../../../types";
 import { graphHeaderFooterConfigStruct } from "../../header-footer/structs";
 import { GraphHeaderFooterConfig } from "../../header-footer/types";
@@ -50,15 +50,14 @@ export class HuiGraphFooterEditor
       <div class="card-config">
         <ha-entity-picker
           allow-custom-entity
-          .label="${this.hass.localize(
+          .label=${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.entity"
-          )} (${this.hass.localize(
+          )}
-            "ui.panel.lovelace.editor.card.config.required"
-          )})"
           .hass=${this.hass}
           .value=${this._entity}
           .configValue=${"entity"}
           .includeDomains=${includeDomains}
+          .required=${true}
           @change=${this._valueChanged}
         ></ha-entity-picker>
         <div class="side-by-side">

src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts

@@ -3,9 +3,9 @@ import { customElement, property, state } from "lit/decorators";
 import { assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
+import "../../../../components/ha-theme-picker";
 import { HomeAssistant } from "../../../../types";
 import { MediaControlCardConfig } from "../../cards/types";
-import "../../../../components/ha-theme-picker";
 import { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
@@ -50,15 +50,14 @@ export class HuiMediaControlCardEditor
     return html`
       <div class="card-config">
         <ha-entity-picker
-          .label="${this.hass.localize(
+          .label=${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.entity"
-          )} (${this.hass.localize(
+          )}
-            "ui.panel.lovelace.editor.card.config.required"
-          )})"
           .hass=${this.hass}
           .value=${this._entity}
           .configValue=${"entity"}
           .includeDomains=${includeDomains}
+          .required=${true}
           @change=${this._valueChanged}
           allow-custom-entity
         ></ha-entity-picker>