Migrate all paper-radio elements to mwc-radio (#10327)

package.json

@@ -84,8 +84,6 @@
     "@polymer/paper-listbox": "^3.0.1",
     "@polymer/paper-menu-button": "^3.1.0",
     "@polymer/paper-progress": "^3.0.1",
-    "@polymer/paper-radio-button": "^3.0.1",
-    "@polymer/paper-radio-group": "^3.0.1",
     "@polymer/paper-ripple": "^3.0.2",
     "@polymer/paper-slider": "^3.0.1",
     "@polymer/paper-styles": "^3.0.1",

src/onboarding/onboarding-core-config.ts

@@ -1,8 +1,6 @@
 import "@material/mwc-button/mwc-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -21,6 +19,9 @@ import { SYMBOL_TO_ISO } from "../data/currency";
 import { onboardCoreConfigStep } from "../data/onboarding";
 import type { PolymerChangedEvent } from "../polymer-types";
 import type { HomeAssistant } from "../types";
+import "../components/ha-radio";
+import "../components/ha-formfield";
+import type { HaRadio } from "../components/ha-radio";
 
 const amsterdam: [number, number] = [52.3731339, 4.8903147];
 const mql = matchMedia("(prefers-color-scheme: dark)");
@@ -135,32 +136,44 @@ class OnboardingCoreConfig extends LitElement {
             "ui.panel.config.core.section.core.core_config.unit_system"
           )}
         </div>
-        <paper-radio-group
-          class="flex"
-          .selected=${this._unitSystemValue}
-          @selected-changed=${this._unitSystemChanged}
-        >
-          <paper-radio-button name="metric" .disabled=${this._working}>
-            ${this.hass.localize(
-              "ui.panel.config.core.section.core.core_config.unit_system_metric"
-            )}
-            <div class="secondary">
-              ${this.hass.localize(
-                "ui.panel.config.core.section.core.core_config.metric_example"
+        <div class="radio-group">
+          <ha-formfield
+            .label=${html`${this.hass.localize(
+                "ui.panel.config.core.section.core.core_config.unit_system_metric"
               )}
-            </div>
-          </paper-radio-button>
-          <paper-radio-button name="imperial" .disabled=${this._working}>
-            ${this.hass.localize(
-              "ui.panel.config.core.section.core.core_config.unit_system_imperial"
-            )}
-            <div class="secondary">
-              ${this.hass.localize(
-                "ui.panel.config.core.section.core.core_config.imperial_example"
+              <div class="secondary">
+                ${this.hass.localize(
+                  "ui.panel.config.core.section.core.core_config.metric_example"
+                )}
+              </div>`}
+          >
+            <ha-radio
+              name="unit_system"
+              value="metric"
+              .checked=${this._unitSystemValue === "metric"}
+              @change=${this._unitSystemChanged}
+              .disabled=${this._working}
+            ></ha-radio>
+          </ha-formfield>
+          <ha-formfield
+            .label=${html`${this.hass.localize(
+                "ui.panel.config.core.section.core.core_config.unit_system_imperial"
               )}
-            </div>
-          </paper-radio-button>
-        </paper-radio-group>
+              <div class="secondary">
+                ${this.hass.localize(
+                  "ui.panel.config.core.section.core.core_config.imperial_example"
+                )}
+              </div>`}
+          >
+            <ha-radio
+              name="unit_system"
+              value="imperial"
+              .checked=${this._unitSystemValue === "imperial"}
+              @change=${this._unitSystemChanged}
+              .disabled=${this._working}
+            ></ha-radio>
+          </ha-formfield>
+        </div>
       </div>
 
       <div class="row">
@@ -281,10 +294,8 @@ class OnboardingCoreConfig extends LitElement {
     this._location = ev.detail.location;
   }
 
-  private _unitSystemChanged(
-    ev: PolymerChangedEvent<ConfigUpdateValues["unit_system"]>
-  ) {
-    this._unitSystem = ev.detail.value;
+  private _unitSystemChanged(ev: CustomEvent) {
+    this._unitSystem = (ev.target as HaRadio).value as "metric" | "imperial";
   }
 
   private async _detect() {
@@ -363,6 +374,13 @@ class OnboardingCoreConfig extends LitElement {
       .row > * {
         margin: 0 8px;
       }
+
+      .radio-group {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+      }
+
       .footer {
         margin-top: 16px;
         text-align: right;

src/panels/config/automation/condition/types/ha-automation-condition-sun.ts

@@ -1,8 +1,5 @@
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
-import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { SunCondition } from "../../../../../data/automation";
@@ -11,12 +8,15 @@ import {
   ConditionElement,
   handleChangeEvent,
 } from "../ha-automation-condition-row";
+import "../../../../../components/ha-radio";
+import "../../../../../components/ha-formfield";
+import type { HaRadio } from "../../../../../components/ha-radio";
 
 @customElement("ha-automation-condition-sun")
 export class HaSunCondition extends LitElement implements ConditionElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public condition!: SunCondition;
+  @property({ attribute: false }) public condition!: SunCondition;
 
   public static get defaultConfig() {
     return {};
@@ -25,28 +25,35 @@ export class HaSunCondition extends LitElement implements ConditionElement {
   protected render() {
     const { after, after_offset, before, before_offset } = this.condition;
     return html`
-      <label id="beforelabel">
+      <label>
         ${this.hass.localize(
           "ui.panel.config.automation.editor.conditions.type.sun.before"
         )}
-      </label>
-      <paper-radio-group
-        .selected=${before}
-        .name=${"before"}
-        aria-labelledby="beforelabel"
-        @paper-radio-group-changed=${this._radioGroupPicked}
-      >
-        <paper-radio-button name="sunrise">
-          ${this.hass.localize(
+        <ha-formfield
+          .label=${this.hass.localize(
             "ui.panel.config.automation.editor.conditions.type.sun.sunrise"
           )}
-        </paper-radio-button>
-        <paper-radio-button name="sunset">
-          ${this.hass.localize(
+        >
+          <ha-radio
+            name="before"
+            value="sunrise"
+            .checked=${before === "sunrise"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+        <ha-formfield
+          .label=${this.hass.localize(
             "ui.panel.config.automation.editor.conditions.type.sun.sunset"
           )}
-        </paper-radio-button>
-      </paper-radio-group>
+        >
+          <ha-radio
+            name="before"
+            value="sunset"
+            .checked=${before === "sunset"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+      </label>
 
       <paper-input
         .label=${this.hass.localize(
@@ -57,28 +64,36 @@ export class HaSunCondition extends LitElement implements ConditionElement {
         @value-changed=${this._valueChanged}
       ></paper-input>
 
-      <label id="afterlabel">
+      <label>
         ${this.hass.localize(
           "ui.panel.config.automation.editor.conditions.type.sun.after"
         )}
-      </label>
-      <paper-radio-group
-        .selected=${after}
-        .name=${"after"}
-        aria-labelledby="afterlabel"
-        @paper-radio-group-changed=${this._radioGroupPicked}
-      >
-        <paper-radio-button name="sunrise">
-          ${this.hass.localize(
+
+        <ha-formfield
+          .label=${this.hass.localize(
             "ui.panel.config.automation.editor.conditions.type.sun.sunrise"
           )}
-        </paper-radio-button>
-        <paper-radio-button name="sunset">
-          ${this.hass.localize(
+        >
+          <ha-radio
+            name="after"
+            value="sunrise"
+            .checked=${after === "sunrise"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+        <ha-formfield
+          .label=${this.hass.localize(
             "ui.panel.config.automation.editor.conditions.type.sun.sunset"
           )}
-        </paper-radio-button>
-      </paper-radio-group>
+        >
+          <ha-radio
+            name="after"
+            value="sunset"
+            .checked=${after === "sunset"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+      </label>
 
       <paper-input
         .label=${this.hass.localize(
@@ -95,14 +110,27 @@ export class HaSunCondition extends LitElement implements ConditionElement {
     handleChangeEvent(this, ev);
   }
 
-  private _radioGroupPicked(ev) {
-    const key = ev.target.name;
+  private _radioGroupPicked(ev: CustomEvent) {
+    const key = (ev.target as HaRadio).name;
     ev.stopPropagation();
     fireEvent(this, "value-changed", {
       value: {
         ...this.condition,
-        [key]: (ev.target as PaperRadioGroupElement).selected,
+        [key]: (ev.target as HaRadio).value,
       },
     });
   }
+
+  static styles = css`
+    label {
+      display: flex;
+      align-items: center;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-condition-sun": HaSunCondition;
+  }
 }

src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts

@@ -1,10 +1,8 @@
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
-import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/entity/ha-entity-picker";
+import type { HaRadio } from "../../../../../components/ha-radio";
 import type { GeoLocationTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import { handleChangeEvent } from "../ha-automation-trigger-row";
@@ -15,7 +13,7 @@ const includeDomains = ["zone"];
 export default class HaGeolocationTrigger extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public trigger!: GeoLocationTrigger;
+  @property({ attribute: false }) public trigger!: GeoLocationTrigger;
 
   public static get defaultConfig() {
     return {
@@ -47,27 +45,35 @@ export default class HaGeolocationTrigger extends LitElement {
         allow-custom-entity
         .includeDomains=${includeDomains}
       ></ha-entity-picker>
-      <label id="eventlabel">
+      <label>
         ${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.geo_location.event"
         )}
-      </label>
-      <paper-radio-group
-        .selected=${event}
-        aria-labelledby="eventlabel"
-        @paper-radio-group-changed=${this._radioGroupPicked}
-      >
-        <paper-radio-button name="enter">
-          ${this.hass.localize(
+        <ha-formfield
+          .label=${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.type.geo_location.enter"
           )}
-        </paper-radio-button>
-        <paper-radio-button name="leave">
-          ${this.hass.localize(
+        >
+          <ha-radio
+            name="event"
+            value="enter"
+            .checked=${event === "enter"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+        <ha-formfield
+          .label=${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.type.geo_location.leave"
           )}
-        </paper-radio-button>
-      </paper-radio-group>
+        >
+          <ha-radio
+            name="event"
+            value="leave"
+            .checked=${event === "leave"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+      </label>
     `;
   }
 
@@ -87,10 +93,17 @@ export default class HaGeolocationTrigger extends LitElement {
     fireEvent(this, "value-changed", {
       value: {
         ...this.trigger,
-        event: (ev.target as PaperRadioGroupElement).selected,
+        event: (ev.target as HaRadio).value,
       },
     });
   }
+
+  static styles = css`
+    label {
+      display: flex;
+      align-items: center;
+    }
+  `;
 }
 
 declare global {

src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts

@@ -1,17 +1,17 @@
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
-import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HaRadio } from "../../../../../components/ha-radio";
 import type { HassTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
+import "../../../../../components/ha-formfield";
+import "../../../../../components/ha-radio";
 
 @customElement("ha-automation-trigger-homeassistant")
 export default class HaHassTrigger extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public trigger!: HassTrigger;
+  @property({ attribute: false }) public trigger!: HassTrigger;
 
   public static get defaultConfig() {
     return {
@@ -26,23 +26,31 @@ export default class HaHassTrigger extends LitElement {
         ${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.homeassistant.event"
         )}
-      </label>
-      <paper-radio-group
-        .selected=${event}
-        aria-labelledby="eventlabel"
-        @paper-radio-group-changed=${this._radioGroupPicked}
-      >
-        <paper-radio-button name="start">
-          ${this.hass.localize(
+        <ha-formfield
+          .label=${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.type.homeassistant.start"
           )}
-        </paper-radio-button>
-        <paper-radio-button name="shutdown">
-          ${this.hass.localize(
+        >
+          <ha-radio
+            name="event"
+            value="start"
+            .checked=${event === "start"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+        <ha-formfield
+          .label=${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown"
           )}
-        </paper-radio-button>
-      </paper-radio-group>
+        >
+          <ha-radio
+            name="event"
+            value="shutdown"
+            .checked=${event === "shutdown"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+      </label>
     `;
   }
 
@@ -51,10 +59,17 @@ export default class HaHassTrigger extends LitElement {
     fireEvent(this, "value-changed", {
       value: {
         ...this.trigger,
-        event: (ev.target as PaperRadioGroupElement).selected,
+        event: (ev.target as HaRadio).value,
       },
     });
   }
+
+  static styles = css`
+    label {
+      display: flex;
+      align-items: center;
+    }
+  `;
 }
 
 declare global {

src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts

@@ -1,10 +1,10 @@
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
-import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-radio";
+import "../../../../../components/ha-formfield";
+import type { HaRadio } from "../../../../../components/ha-radio";
 import type { SunTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import {
@@ -16,7 +16,7 @@ import {
 export class HaSunTrigger extends LitElement implements TriggerElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public trigger!: SunTrigger;
+  @property({ attribute: false }) public trigger!: SunTrigger;
 
   public static get defaultConfig() {
     return {
@@ -27,27 +27,35 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
   protected render() {
     const { offset, event } = this.trigger;
     return html`
-      <label id="eventlabel">
+      <label>
         ${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.sun.event"
         )}
-      </label>
-      <paper-radio-group
-        .selected=${event}
-        aria-labelledby="eventlabel"
-        @paper-radio-group-changed=${this._radioGroupPicked}
-      >
-        <paper-radio-button name="sunrise">
-          ${this.hass.localize(
+        <ha-formfield
+          .label=${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.type.sun.sunrise"
           )}
-        </paper-radio-button>
-        <paper-radio-button name="sunset">
-          ${this.hass.localize(
+        >
+          <ha-radio
+            name="event"
+            value="sunrise"
+            .checked=${event === "sunrise"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+        <ha-formfield
+          .label=${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.type.sun.sunset"
           )}
-        </paper-radio-button>
-      </paper-radio-group>
+        >
+          <ha-radio
+            name="event"
+            value="sunset"
+            .checked=${event === "sunset"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+      </label>
 
       <paper-input
         .label=${this.hass.localize(
@@ -69,8 +77,21 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
     fireEvent(this, "value-changed", {
       value: {
         ...this.trigger,
-        event: (ev.target as PaperRadioGroupElement).selected,
+        event: (ev.target as HaRadio).value,
       },
     });
   }
+
+  static styles = css`
+    label {
+      display: flex;
+      align-items: center;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-trigger-sun": HaSunTrigger;
+  }
 }

src/panels/config/automation/trigger/types/ha-automation-trigger-zone.ts

@@ -1,7 +1,4 @@
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
-import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeStateDomain } from "../../../../../common/entity/compute_state_domain";
@@ -10,6 +7,9 @@ import "../../../../../components/entity/ha-entity-picker";
 import type { ZoneTrigger } from "../../../../../data/automation";
 import type { PolymerChangedEvent } from "../../../../../polymer-types";
 import type { HomeAssistant } from "../../../../../types";
+import "../../../../../components/ha-radio";
+import "../../../../../components/ha-formfield";
+import type { HaRadio } from "../../../../../components/ha-radio";
 
 function zoneAndLocationFilter(stateObj) {
   return hasLocation(stateObj) && computeStateDomain(stateObj) !== "zone";
@@ -54,27 +54,36 @@ export class HaZoneTrigger extends LitElement {
         allow-custom-entity
         .includeDomains=${includeDomains}
       ></ha-entity-picker>
-      <label id="eventlabel">
+
+      <label>
         ${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.zone.event"
         )}
-      </label>
-      <paper-radio-group
-        .selected=${event}
-        aria-labelledby="eventlabel"
-        @paper-radio-group-changed=${this._radioGroupPicked}
-      >
-        <paper-radio-button name="enter">
-          ${this.hass.localize(
+        <ha-formfield
+          .label=${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.type.zone.enter"
           )}
-        </paper-radio-button>
-        <paper-radio-button name="leave">
-          ${this.hass.localize(
+        >
+          <ha-radio
+            name="event"
+            value="enter"
+            .checked=${event === "enter"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+        <ha-formfield
+          .label=${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.type.zone.leave"
           )}
-        </paper-radio-button>
-      </paper-radio-group>
+        >
+          <ha-radio
+            name="event"
+            value="leave"
+            .checked=${event === "leave"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+      </label>
     `;
   }
 
@@ -97,10 +106,17 @@ export class HaZoneTrigger extends LitElement {
     fireEvent(this, "value-changed", {
       value: {
         ...this.trigger,
-        event: (ev.target as PaperRadioGroupElement).selected,
+        event: (ev.target as HaRadio).value,
       },
     });
   }
+
+  static styles = css`
+    label {
+      display: flex;
+      align-items: center;
+    }
+  `;
 }
 
 declare global {

src/panels/config/core/ha-config-core-form.ts

@@ -1,8 +1,6 @@
 import "@material/mwc-button/mwc-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -16,6 +14,9 @@ import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
 import { SYMBOL_TO_ISO } from "../../../data/currency";
 import type { PolymerChangedEvent } from "../../../polymer-types";
 import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-formfield";
+import "../../../components/ha-radio";
+import type { HaRadio } from "../../../components/ha-radio";
 
 @customElement("ha-config-core-form")
 class ConfigCoreForm extends LitElement {
@@ -120,32 +121,44 @@ class ConfigCoreForm extends LitElement {
                 "ui.panel.config.core.section.core.core_config.unit_system"
               )}
             </div>
-            <paper-radio-group
-              class="flex"
-              .selected=${this._unitSystemValue}
-              @selected-changed=${this._unitSystemChanged}
-            >
-              <paper-radio-button name="metric" .disabled=${disabled}>
-                ${this.hass.localize(
-                  "ui.panel.config.core.section.core.core_config.unit_system_metric"
-                )}
-                <div class="secondary">
-                  ${this.hass.localize(
-                    "ui.panel.config.core.section.core.core_config.metric_example"
+            <div class="radio-group">
+              <ha-formfield
+                .label=${html`${this.hass.localize(
+                    "ui.panel.config.core.section.core.core_config.unit_system_metric"
                   )}
-                </div>
-              </paper-radio-button>
-              <paper-radio-button name="imperial" .disabled=${disabled}>
-                ${this.hass.localize(
-                  "ui.panel.config.core.section.core.core_config.unit_system_imperial"
-                )}
-                <div class="secondary">
-                  ${this.hass.localize(
-                    "ui.panel.config.core.section.core.core_config.imperial_example"
+                  <div class="secondary">
+                    ${this.hass.localize(
+                      "ui.panel.config.core.section.core.core_config.metric_example"
+                    )}
+                  </div>`}
+              >
+                <ha-radio
+                  name="unit_system"
+                  value="metric"
+                  .checked=${this._unitSystemValue === "metric"}
+                  @change=${this._unitSystemChanged}
+                  .disabled=${this._working}
+                ></ha-radio>
+              </ha-formfield>
+              <ha-formfield
+                .label=${html`${this.hass.localize(
+                    "ui.panel.config.core.section.core.core_config.unit_system_imperial"
                   )}
-                </div>
-              </paper-radio-button>
-            </paper-radio-group>
+                  <div class="secondary">
+                    ${this.hass.localize(
+                      "ui.panel.config.core.section.core.core_config.imperial_example"
+                    )}
+                  </div>`}
+              >
+                <ha-radio
+                  name="unit_system"
+                  value="imperial"
+                  .checked=${this._unitSystemValue === "imperial"}
+                  @change=${this._unitSystemChanged}
+                  .disabled=${this._working}
+                ></ha-radio>
+              </ha-formfield>
+            </div>
           </div>
           <div class="row">
             <div class="flex">
@@ -258,10 +271,8 @@ class ConfigCoreForm extends LitElement {
     this._location = ev.detail.location;
   }
 
-  private _unitSystemChanged(
-    ev: PolymerChangedEvent<ConfigUpdateValues["unit_system"]>
-  ) {
-    this._unitSystem = ev.detail.value;
+  private _unitSystemChanged(ev: CustomEvent) {
+    this._unitSystem = (ev.target as HaRadio).value as "metric" | "imperial";
   }
 
   private async _save() {
@@ -307,6 +318,12 @@ class ConfigCoreForm extends LitElement {
         margin: 0 8px;
       }
 
+      .radio-group {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+      }
+
       .card-actions {
         text-align: right;
       }

src/panels/config/core/ha-config-name-form.ts

@@ -1,8 +1,6 @@
 import "@material/mwc-button/mwc-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-card";

src/panels/config/helpers/forms/ha-input_datetime-form.ts

@@ -1,6 +1,4 @@
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -8,6 +6,9 @@ import "../../../../components/ha-icon-picker";
 import { InputDateTime } from "../../../../data/input_datetime";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
+import "../../../../components/ha-formfield";
+import "../../../../components/ha-radio";
+import type { HaRadio } from "../../../../components/ha-radio";
 
 @customElement("ha-input_datetime-form")
 class HaInputDateTimeForm extends LitElement {
@@ -81,32 +82,49 @@ class HaInputDateTimeForm extends LitElement {
         <br />
         ${this.hass.localize("ui.dialogs.helper_settings.input_datetime.mode")}:
         <br />
-        <paper-radio-group
-          .selected=${this._mode}
-          @selected-changed=${this._modeChanged}
+
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.dialogs.helper_settings.input_datetime.date"
+          )}
         >
-          <paper-radio-button name="date">
-            ${this.hass.localize(
-              "ui.dialogs.helper_settings.input_datetime.date"
-            )}
-          </paper-radio-button>
-          <paper-radio-button name="time">
-            ${this.hass.localize(
-              "ui.dialogs.helper_settings.input_datetime.time"
-            )}
-          </paper-radio-button>
-          <paper-radio-button name="datetime">
-            ${this.hass.localize(
-              "ui.dialogs.helper_settings.input_datetime.datetime"
-            )}
-          </paper-radio-button>
-        </paper-radio-group>
+          <ha-radio
+            name="mode"
+            value="date"
+            .checked=${this._mode === "date"}
+            @change=${this._modeChanged}
+          ></ha-radio>
+        </ha-formfield>
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.dialogs.helper_settings.input_datetime.time"
+          )}
+        >
+          <ha-radio
+            name="mode"
+            value="time"
+            .checked=${this._mode === "time"}
+            @change=${this._modeChanged}
+          ></ha-radio>
+        </ha-formfield>
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.dialogs.helper_settings.input_datetime.datetime"
+          )}
+        >
+          <ha-radio
+            name="mode"
+            value="datetime"
+            .checked=${this._mode === "datetime"}
+            @change=${this._modeChanged}
+          ></ha-radio>
+        </ha-formfield>
       </div>
     `;
   }
 
   private _modeChanged(ev: CustomEvent) {
-    const mode = ev.detail.value;
+    const mode = (ev.target as HaRadio).value;
     fireEvent(this, "value-changed", {
       value: {
         ...this._item,

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -1,6 +1,4 @@
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -8,6 +6,9 @@ import "../../../../components/ha-icon-picker";
 import { InputNumber } from "../../../../data/input_number";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
+import "../../../../components/ha-formfield";
+import "../../../../components/ha-radio";
+import type { HaRadio } from "../../../../components/ha-radio";
 
 @customElement("ha-input_number-form")
 class HaInputNumberForm extends LitElement {
@@ -117,21 +118,30 @@ class HaInputNumberForm extends LitElement {
                 ${this.hass.localize(
                   "ui.dialogs.helper_settings.input_number.mode"
                 )}
-                <paper-radio-group
-                  .selected=${this._mode}
-                  @selected-changed=${this._modeChanged}
+                <ha-formfield
+                  .label=${this.hass.localize(
+                    "ui.dialogs.helper_settings.input_number.slider"
+                  )}
                 >
-                  <paper-radio-button name="slider">
-                    ${this.hass.localize(
-                      "ui.dialogs.helper_settings.input_number.slider"
-                    )}
-                  </paper-radio-button>
-                  <paper-radio-button name="box">
-                    ${this.hass.localize(
-                      "ui.dialogs.helper_settings.input_number.box"
-                    )}
-                  </paper-radio-button>
-                </paper-radio-group>
+                  <ha-radio
+                    name="mode"
+                    value="slider"
+                    .checked=${this._mode === "slider"}
+                    @change=${this._modeChanged}
+                  ></ha-radio>
+                </ha-formfield>
+                <ha-formfield
+                  .label=${this.hass.localize(
+                    "ui.dialogs.helper_settings.input_number.box"
+                  )}
+                >
+                  <ha-radio
+                    name="mode"
+                    value="box"
+                    .checked=${this._mode === "box"}
+                    @change=${this._modeChanged}
+                  ></ha-radio>
+                </ha-formfield>
               </div>
               <paper-input
                 .value=${this._step}
@@ -159,7 +169,7 @@ class HaInputNumberForm extends LitElement {
 
   private _modeChanged(ev: CustomEvent) {
     fireEvent(this, "value-changed", {
-      value: { ...this._item, mode: ev.detail.value },
+      value: { ...this._item, mode: (ev.target as HaRadio).value },
     });
   }
 

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -1,13 +1,14 @@
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-picker";
+import type { HaRadio } from "../../../../components/ha-radio";
 import { InputText } from "../../../../data/input_text";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
+import "../../../../components/ha-formfield";
+import "../../../../components/ha-radio";
 
 @customElement("ha-input_text-form")
 class HaInputTextForm extends LitElement {
@@ -112,21 +113,30 @@ class HaInputTextForm extends LitElement {
                 ${this.hass.localize(
                   "ui.dialogs.helper_settings.input_text.mode"
                 )}
-                <paper-radio-group
-                  .selected=${this._mode}
-                  @selected-changed=${this._modeChanged}
+                <ha-formfield
+                  .label=${this.hass.localize(
+                    "ui.dialogs.helper_settings.input_text.text"
+                  )}
                 >
-                  <paper-radio-button name="text">
-                    ${this.hass.localize(
-                      "ui.dialogs.helper_settings.input_text.text"
-                    )}
-                  </paper-radio-button>
-                  <paper-radio-button name="password">
-                    ${this.hass.localize(
-                      "ui.dialogs.helper_settings.input_text.password"
-                    )}
-                  </paper-radio-button>
-                </paper-radio-group>
+                  <ha-radio
+                    name="mode"
+                    value="text"
+                    .checked=${this._mode === "text"}
+                    @change=${this._modeChanged}
+                  ></ha-radio>
+                </ha-formfield>
+                <ha-formfield
+                  .label=${this.hass.localize(
+                    "ui.dialogs.helper_settings.input_text.password"
+                  )}
+                >
+                  <ha-radio
+                    name="mode"
+                    value="password"
+                    .checked=${this._mode === "password"}
+                    @change=${this._modeChanged}
+                  ></ha-radio>
+                </ha-formfield>
               </div>
               <paper-input
                 .value=${this._pattern}
@@ -144,7 +154,7 @@ class HaInputTextForm extends LitElement {
 
   private _modeChanged(ev: CustomEvent) {
     fireEvent(this, "value-changed", {
-      value: { ...this._item, mode: ev.detail.value },
+      value: { ...this._item, mode: (ev.target as HaRadio).value },
     });
   }
 

yarn.lock

@@ -3378,31 +3378,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-radio-button@npm:^3.0.0-pre.26, @polymer/paper-radio-button@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@polymer/paper-radio-button@npm:3.0.1"
-  dependencies:
-    "@polymer/iron-checked-element-behavior": ^3.0.0-pre.26
-    "@polymer/iron-flex-layout": ^3.0.0-pre.26
-    "@polymer/paper-behaviors": ^3.0.0-pre.27
-    "@polymer/paper-styles": ^3.0.0-pre.26
-    "@polymer/polymer": ^3.0.0
-  checksum: 2e0d448dabb76164536ad0af499f88161d459b0f0b664b028f74487630bfdfac2d8e293bee0d3df6f4942fdb03bfcd5acd5818fe17213c05819a1a3e59fa2948
-  languageName: node
-  linkType: hard
-
-"@polymer/paper-radio-group@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@polymer/paper-radio-group@npm:3.0.1"
-  dependencies:
-    "@polymer/iron-a11y-keys-behavior": ^3.0.0-pre.26
-    "@polymer/iron-menu-behavior": ^3.0.0-pre.26
-    "@polymer/paper-radio-button": ^3.0.0-pre.26
-    "@polymer/polymer": ^3.0.0
-  checksum: e60f820171d5cbfca987a98a1396d6279fa02da8274c1a4ceaf9bb1c8e320b04be9ee0f913c6753343d3fd8861baabc7f3f9aa5e86f953b9335ed802c6e008f2
-  languageName: node
-  linkType: hard
-
 "@polymer/paper-ripple@npm:^3.0.0-pre.26, @polymer/paper-ripple@npm:^3.0.2":
   version: 3.0.2
   resolution: "@polymer/paper-ripple@npm:3.0.2"
@@ -9104,8 +9079,6 @@ fsevents@^1.2.7:
     "@polymer/paper-listbox": ^3.0.1
     "@polymer/paper-menu-button": ^3.1.0
     "@polymer/paper-progress": ^3.0.1
-    "@polymer/paper-radio-button": ^3.0.1
-    "@polymer/paper-radio-group": ^3.0.1
     "@polymer/paper-ripple": ^3.0.2
     "@polymer/paper-slider": ^3.0.1
     "@polymer/paper-styles": ^3.0.1