diff --git a/cast/src/launcher/layout/hc-connect.ts b/cast/src/launcher/layout/hc-connect.ts
index 8aab0f0e6f..a8a89f9c6d 100644
--- a/cast/src/launcher/layout/hc-connect.ts
+++ b/cast/src/launcher/layout/hc-connect.ts
@@ -26,7 +26,7 @@ import "../../../../src/components/ha-svg-icon";
import "../../../../src/layouts/hass-loading-screen";
import { registerServiceWorker } from "../../../../src/util/register-service-worker";
import "./hc-layout";
-import "../../../../src/components/ha-textfield";
+import "../../../../src/components/input/ha-input";
import "../../../../src/components/ha-button";
const seeFAQ = (qid) => html`
@@ -123,11 +123,11 @@ export class HcConnect extends LitElement {
To get started, enter your Home Assistant URL and click authorize.
If you want a preview instead, click the show demo button.
-
+ >
${this.error ? html` ${this.error}
` : ""}
@@ -204,7 +204,7 @@ export class HcConnect extends LitElement {
}
private async _handleConnect() {
- const inputEl = this.shadowRoot!.querySelector("ha-textfield")!;
+ const inputEl = this.shadowRoot!.querySelector("ha-input")!;
const value = inputEl.value || "";
this.error = undefined;
@@ -319,7 +319,7 @@ export class HcConnect extends LitElement {
flex: 1;
}
- ha-textfield {
+ ha-input {
width: 100%;
}
`;
diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts
deleted file mode 100644
index 000c0055ee..0000000000
--- a/src/components/ha-textfield.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import "./input/ha-input";
-import type { HaInput } from "./input/ha-input";
-
-/**
- * Legacy wrapper around ha-input that preserves the mwc-textfield API.
- * New code should use ha-input directly.
- * @deprecated Use ha-input instead.
- */
-@customElement("ha-textfield")
-export class HaTextField extends LitElement {
- @property({ type: String })
- public value = "";
-
- @property({ type: String })
- public type:
- | "text"
- | "search"
- | "tel"
- | "url"
- | "email"
- | "password"
- | "date"
- | "month"
- | "week"
- | "time"
- | "datetime-local"
- | "number"
- | "color" = "text";
-
- @property({ type: String })
- public label = "";
-
- @property({ type: String })
- public placeholder = "";
-
- @property({ type: String })
- public prefix = "";
-
- @property({ type: String })
- public suffix = "";
-
- @property({ type: Boolean })
- // @ts-ignore
- public icon = false;
-
- @property({ type: Boolean })
- // @ts-ignore
- // eslint-disable-next-line lit/attribute-names
- public iconTrailing = false;
-
- @property({ type: Boolean })
- public disabled = false;
-
- @property({ type: Boolean })
- public required = false;
-
- @property({ type: Number, attribute: "minlength" })
- public minLength = -1;
-
- @property({ type: Number, attribute: "maxlength" })
- public maxLength = -1;
-
- @property({ type: Boolean, reflect: true })
- public outlined = false;
-
- @property({ type: String })
- public helper = "";
-
- @property({ type: Boolean, attribute: "validateoninitialrender" })
- public validateOnInitialRender = false;
-
- @property({ type: String, attribute: "validationmessage" })
- public validationMessage = "";
-
- @property({ type: Boolean, attribute: "autovalidate" })
- public autoValidate = false;
-
- @property({ type: String })
- public pattern = "";
-
- @property()
- public min: number | string = "";
-
- @property()
- public max: number | string = "";
-
- @property()
- public step: number | "any" | null = null;
-
- @property({ type: Number })
- public size: number | null = null;
-
- @property({ type: Boolean, attribute: "helperpersistent" })
- public helperPersistent = false;
-
- @property({ attribute: "charcounter" })
- public charCounter: boolean | "external" | "internal" = false;
-
- @property({ type: Boolean, attribute: "endaligned" })
- public endAligned = false;
-
- @property({ type: String, attribute: "inputmode" })
- public inputMode = "";
-
- @property({ type: Boolean, reflect: true, attribute: "readonly" })
- public readOnly = false;
-
- @property({ type: String })
- public name = "";
-
- @property({ type: String })
- // eslint-disable-next-line lit/no-native-attributes
- public autocapitalize = "";
-
- // --- ha-textfield-specific properties ---
-
- @property({ type: Boolean })
- public invalid = false;
-
- @property({ attribute: "error-message" })
- public errorMessage?: string;
-
- @property()
- public autocomplete?: string;
-
- @property({ type: Boolean })
- public autocorrect = true;
-
- @property({ attribute: "input-spellcheck" })
- public inputSpellcheck?: string;
-
- @query("ha-input")
- private _haInput?: HaInput;
-
- static shadowRootOptions: ShadowRootInit = {
- mode: "open",
- delegatesFocus: true,
- };
-
- public get formElement(): HTMLInputElement | undefined {
- return (this._haInput as any)?._input?.input;
- }
-
- public select(): void {
- this._haInput?.select();
- }
-
- public setSelectionRange(
- selectionStart: number,
- selectionEnd: number,
- selectionDirection?: "forward" | "backward" | "none"
- ): void {
- this._haInput?.setSelectionRange(
- selectionStart,
- selectionEnd,
- selectionDirection
- );
- }
-
- public setRangeText(
- replacement: string,
- start?: number,
- end?: number,
- selectMode?: "select" | "start" | "end" | "preserve"
- ): void {
- this._haInput?.setRangeText(replacement, start, end, selectMode);
- }
-
- public checkValidity(): boolean {
- return this._haInput?.checkValidity() ?? true;
- }
-
- public reportValidity(): boolean {
- return this._haInput?.reportValidity() ?? true;
- }
-
- public setCustomValidity(message: string): void {
- this.validationMessage = message;
- this.invalid = !!message;
- }
-
- /** No-op. Preserved for backward compatibility. */
- public layout(): void {
- // no-op — mwc-textfield needed this for notched outline recalculation
- }
-
- protected override firstUpdated(changedProperties: PropertyValues): void {
- super.firstUpdated(changedProperties);
- if (this.validateOnInitialRender) {
- this.reportValidity();
- }
- }
-
- protected override updated(changedProperties: PropertyValues): void {
- super.updated(changedProperties);
-
- if (changedProperties.has("invalid") && this._haInput) {
- if (
- this.invalid ||
- (changedProperties.get("invalid") !== undefined && !this.invalid)
- ) {
- this.reportValidity();
- }
- }
- }
-
- protected override render(): TemplateResult {
- const errorMsg = this.errorMessage || this.validationMessage;
- return html`
- 0 ? this.minLength : undefined}
- .maxlength=${this.maxLength > 0 ? this.maxLength : undefined}
- .min=${this.min !== "" ? this.min : undefined}
- .max=${this.max !== "" ? this.max : undefined}
- .step=${this.step ?? undefined}
- .name=${this.name || undefined}
- .autocomplete=${this.autocomplete}
- .autocorrect=${this.autocorrect}
- .spellcheck=${this.inputSpellcheck === "true"}
- .inputmode=${this.inputMode}
- .autocapitalize=${this.autocapitalize || ""}
- .invalid=${this.invalid}
- .validationMessage=${errorMsg || ""}
- .autoValidate=${this.autoValidate}
- .hint=${this.helper}
- .withoutSpinButtons=${this.type === "number"}
- .insetLabel=${this.prefix}
- @input=${this._onInput}
- @change=${this._onChange}
- >
- ${this.icon
- ? html``
- : nothing}
- ${this.prefix
- ? html`${this.prefix}`
- : nothing}
- ${this.suffix
- ? html`${this.suffix}`
- : nothing}
- ${this.iconTrailing
- ? html``
- : nothing}
-
- `;
- }
-
- private _onInput(): void {
- this.value = this._haInput?.value ?? "";
- }
-
- private _onChange(): void {
- this.value = this._haInput?.value ?? "";
- }
-
- static override styles = css`
- :host {
- display: inline-flex;
- flex-direction: column;
- outline: none;
- }
-
- ha-input {
- --ha-input-padding-bottom: 0;
- width: 100%;
- }
-
- .prefix,
- .suffix {
- color: var(--secondary-text-color);
- }
-
- .prefix {
- padding-top: var(--ha-space-3);
- margin-inline-end: var(--text-field-prefix-padding-right);
- }
- `;
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- "ha-textfield": HaTextField;
- }
-}
diff --git a/src/components/input/ha-input.ts b/src/components/input/ha-input.ts
index bb82d3657e..b003624b31 100644
--- a/src/components/input/ha-input.ts
+++ b/src/components/input/ha-input.ts
@@ -235,7 +235,8 @@ export class HaInput extends LitElement {
this,
"label",
"hint",
- "input"
+ "input",
+ "start"
);
static shadowRootOptions: ShadowRootInit = {
@@ -318,6 +319,8 @@ export class HaInput extends LitElement {
? false
: this._hasSlotController.test("hint");
+ const hasStartSlot = this._hasSlotController.test("start");
+
return html`
`;
}
diff --git a/src/panels/config/automation/action/types/ha-automation-action-parallel.ts b/src/panels/config/automation/action/types/ha-automation-action-parallel.ts
index 88a1fa15a1..02f7c9ff75 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-parallel.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-parallel.ts
@@ -2,7 +2,6 @@ import type { CSSResultGroup } from "lit";
import { html, LitElement } from "lit";
import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-textfield";
import type { Action, ParallelAction } from "../../../../../data/script";
import { haStyle } from "../../../../../resources/styles";
import type { HomeAssistant } from "../../../../../types";
diff --git a/src/panels/config/automation/action/types/ha-automation-action-sequence.ts b/src/panels/config/automation/action/types/ha-automation-action-sequence.ts
index 9a8b93522d..a4d21e7922 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-sequence.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-sequence.ts
@@ -1,14 +1,13 @@
import type { CSSResultGroup } from "lit";
import { html, LitElement } from "lit";
-import { query, customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-textfield";
import type { Action, SequenceAction } from "../../../../../data/script";
import { haStyle } from "../../../../../resources/styles";
import type { HomeAssistant } from "../../../../../types";
import "../ha-automation-action";
-import type { ActionElement } from "../ha-automation-action-row";
import type HaAutomationAction from "../ha-automation-action";
+import type { ActionElement } from "../ha-automation-action-row";
@customElement("ha-automation-action-sequence")
export class HaSequenceAction extends LitElement implements ActionElement {
diff --git a/src/panels/config/blueprint/dialog-import-blueprint.ts b/src/panels/config/blueprint/dialog-import-blueprint.ts
index 3fae5f9a8d..d6f0590bcd 100644
--- a/src/panels/config/blueprint/dialog-import-blueprint.ts
+++ b/src/panels/config/blueprint/dialog-import-blueprint.ts
@@ -2,23 +2,23 @@ import { mdiClose, mdiOpenInNew } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
-import { documentationUrl } from "../../../util/documentation-url";
+import { withViewTransition } from "../../../common/util/view-transition";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import "../../../components/ha-code-editor";
-import "../../../components/ha-dialog-header";
+import "../../../components/ha-dialog";
import "../../../components/ha-dialog-footer";
+import "../../../components/ha-dialog-header";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-markdown";
import "../../../components/ha-spinner";
-import "../../../components/ha-textfield";
-import "../../../components/ha-dialog";
-import type { HaTextField } from "../../../components/ha-textfield";
+import "../../../components/input/ha-input";
+import type { HaInput } from "../../../components/input/ha-input";
import type { BlueprintImportResult } from "../../../data/blueprint";
import { importBlueprint, saveBlueprint } from "../../../data/blueprint";
import { haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
-import { withViewTransition } from "../../../common/util/view-transition";
+import { documentationUrl } from "../../../util/documentation-url";
@customElement("ha-dialog-import-blueprint")
class DialogImportBlueprint extends LitElement {
@@ -42,7 +42,7 @@ class DialogImportBlueprint extends LitElement {
@state() private _sourceUrlWarning = false;
- @query("#input") private _input?: HaTextField;
+ @query("#input") private _input?: HaInput;
public showDialog(params): void {
this._params = params;
@@ -131,14 +131,14 @@ class DialogImportBlueprint extends LitElement {
`
: html`
-
+ >
`}
-
+ >
`}
@@ -328,8 +328,7 @@ class DialogImportBlueprint extends LitElement {
margin-top: 0;
margin-bottom: var(--ha-space-2);
}
- ha-textfield {
- display: block;
+ ha-input {
margin-top: var(--ha-space-6);
}
ha-alert {
diff --git a/src/panels/config/category/dialog-assign-category.ts b/src/panels/config/category/dialog-assign-category.ts
index bee7b2130d..c4bbfab7a3 100644
--- a/src/panels/config/category/dialog-assign-category.ts
+++ b/src/panels/config/category/dialog-assign-category.ts
@@ -53,7 +53,6 @@ class DialogAssignCategory extends LitElement {
const entry = this._params.entityReg.categories[this._params.scope];
return html`
${this._error}`
: ""}
-
+ >
) {
this._error = undefined;
this._icon = ev.detail.value;
}
@@ -144,10 +146,8 @@ class DialogCategoryDetail extends DialogMixin${this._error}`
: nothing}
-
+ >
-
+ >
-
-
+ ${this.hass.localize(
+ "ui.panel.config.core.section.core.core_config.elevation_meters"
+ )}
+
${this.hass.localize(
@@ -358,8 +362,8 @@ class HaConfigSectionGeneral extends LitElement {
this[`_${target.getAttribute("name")}`] = ev.detail.value;
}
- private _handleChange(ev: Event) {
- const target = ev.currentTarget as HaTextField;
+ private _handleChange(ev: InputEvent) {
+ const target = ev.currentTarget as HaInput;
this[`_${target.name}`] = target.value;
}
diff --git a/src/panels/config/developer-tools/event/developer-tools-event.ts b/src/panels/config/developer-tools/event/developer-tools-event.ts
index 72ce29730b..3cb0e03ed1 100644
--- a/src/panels/config/developer-tools/event/developer-tools-event.ts
+++ b/src/panels/config/developer-tools/event/developer-tools-event.ts
@@ -1,17 +1,18 @@
import type { CSSResultGroup, TemplateResult } from "lit";
import { LitElement, css, html } from "lit";
import { customElement, property, state } from "lit/decorators";
-import "../../../../components/ha-yaml-editor";
-import "../../../../components/ha-textfield";
+import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-button";
import "../../../../components/ha-card";
+import "../../../../components/ha-yaml-editor";
+import "../../../../components/input/ha-input";
+import type { HaInput } from "../../../../components/input/ha-input";
import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
import { documentationUrl } from "../../../../util/documentation-url";
import "./event-subscribe-card";
import "./events-list";
-import { haStyle } from "../../../../resources/styles";
-import type { HomeAssistant } from "../../../../types";
-import { fireEvent } from "../../../../common/dom/fire_event";
@customElement("developer-tools-event")
class HaPanelDevEvent extends LitElement {
@@ -55,7 +56,7 @@ class HaPanelDevEvent extends LitElement {
-
+ >
${this.hass.localize(
"ui.panel.config.developer-tools.tabs.events.data"
@@ -117,8 +118,8 @@ class HaPanelDevEvent extends LitElement {
this._selectedEventType = ev.detail.eventType;
}
- private _eventTypeChanged(ev) {
- this._eventType = ev.target.value;
+ private _eventTypeChanged(ev: InputEvent) {
+ this._eventType = (ev.target as HaInput).value ?? "";
}
private _yamlChanged(ev) {
@@ -178,10 +179,6 @@ class HaPanelDevEvent extends LitElement {
margin-top: var(--ha-space-2);
}
- ha-textfield {
- display: block;
- }
-
event-subscribe-card {
display: block;
margin-top: var(--ha-space-4);
diff --git a/src/panels/config/developer-tools/event/event-subscribe-card.ts b/src/panels/config/developer-tools/event/event-subscribe-card.ts
index 986c8fb305..6e1642b8bc 100644
--- a/src/panels/config/developer-tools/event/event-subscribe-card.ts
+++ b/src/panels/config/developer-tools/event/event-subscribe-card.ts
@@ -4,11 +4,12 @@ import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import { formatTime } from "../../../../common/datetime/format_time";
-import "../../../../components/ha-card";
-import "../../../../components/ha-textfield";
-import "../../../../components/ha-yaml-editor";
-import "../../../../components/ha-button";
import "../../../../components/ha-alert";
+import "../../../../components/ha-button";
+import "../../../../components/ha-card";
+import "../../../../components/ha-yaml-editor";
+import "../../../../components/input/ha-input";
+import type { HaInput } from "../../../../components/input/ha-input";
import type { HomeAssistant } from "../../../../types";
@customElement("event-subscribe-card")
@@ -62,7 +63,7 @@ class EventSubscribeCard extends LitElement {
)}
>
-
-
+
+ >
${this._error
? html`${this._error}`
: ""}
@@ -144,13 +144,13 @@ class EventSubscribeCard extends LitElement {
`;
}
- private _valueChanged(ev): void {
- this._eventType = ev.target.value;
+ private _valueChanged(ev: InputEvent): void {
+ this._eventType = (ev.target as HaInput).value ?? "";
this._error = undefined;
}
- private _filterChanged(ev): void {
- this._eventFilter = ev.target.value;
+ private _filterChanged(ev: InputEvent): void {
+ this._eventFilter = (ev.target as HaInput).value ?? "";
}
private _testEventFilter(event: HassEvent): boolean {
@@ -231,9 +231,8 @@ class EventSubscribeCard extends LitElement {
}
static styles = css`
- ha-textfield {
- display: block;
- margin-bottom: var(--ha-space-4);
+ ha-input {
+ margin-bottom: var(--ha-space-2);
}
.error-message {
margin-top: var(--ha-space-2);
diff --git a/src/panels/config/developer-tools/state/developer-tools-state.ts b/src/panels/config/developer-tools/state/developer-tools-state.ts
index df3c974135..5bde5c7012 100644
--- a/src/panels/config/developer-tools/state/developer-tools-state.ts
+++ b/src/panels/config/developer-tools/state/developer-tools-state.ts
@@ -24,6 +24,8 @@ import "../../../../components/ha-svg-icon";
import "../../../../components/ha-tip";
import "../../../../components/ha-yaml-editor";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
+import "../../../../components/input/ha-input";
+import type { HaInput } from "../../../../components/input/ha-input";
import "../../../../components/input/ha-input-search";
import type { HaInputSearch } from "../../../../components/input/ha-input-search";
import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -161,7 +163,7 @@ class HaPanelDevState extends LitElement {
`
: nothing}
-
+ >
${this.hass.localize(
"ui.panel.config.developer-tools.tabs.states.state_attributes"
@@ -313,8 +315,8 @@ class HaPanelDevState extends LitElement {
this._expanded = true;
}
- private _stateChanged(ev) {
- this._state = ev.target.value;
+ private _stateChanged(ev: InputEvent) {
+ this._state = (ev.target as HaInput).value ?? "";
}
private _entityFilterChanged(ev: InputEvent) {
@@ -513,10 +515,6 @@ class HaPanelDevState extends LitElement {
--ha-input-padding-bottom: 0;
}
- ha-textfield {
- display: block;
- }
-
.heading {
display: flex;
justify-content: space-between;
diff --git a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
index dc21ac990b..3d07bf475e 100644
--- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
+++ b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
@@ -3,14 +3,15 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeDeviceNameDisplay } from "../../../../common/entity/compute_device_name";
+import "../../../../components/ha-adaptive-dialog";
import "../../../../components/ha-alert";
import "../../../../components/ha-area-picker";
-import "../../../../components/ha-adaptive-dialog";
-import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-button";
+import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-labels-picker";
import type { HaSwitch } from "../../../../components/ha-switch";
-import "../../../../components/ha-textfield";
+import "../../../../components/input/ha-input";
+import type { HaInput } from "../../../../components/input/ha-input";
import type { DeviceRegistryEntry } from "../../../../data/device/device_registry";
import { haStyle, haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
@@ -77,7 +78,7 @@ class DialogDeviceRegistryDetail extends LitElement {
? html`${this._error} `
: ""}
`;
}
- private _onCodeChanged(ev: any) {
- const value = ev.currentTarget.value;
+ private _onCodeChanged(ev: InputEvent) {
+ const value = (ev.target as HTMLInputElement).value;
this._code = value;
fireEvent(this, "pairing-code-changed", { code: value });
}
diff --git a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-google-home-fallback.ts b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-google-home-fallback.ts
index 4da89ef6c1..151a38ad56 100644
--- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-google-home-fallback.ts
+++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-google-home-fallback.ts
@@ -4,7 +4,7 @@ import { fireEvent } from "../../../../../../common/dom/fire_event";
import "../../../../../../components/ha-icon-next";
import "../../../../../../components/ha-md-list-item";
import "../../../../../../components/ha-md-list";
-import "../../../../../../components/ha-textfield";
+import "../../../../../../components/input/ha-input";
import type { HomeAssistant } from "../../../../../../types";
import { sharedStyles } from "./matter-add-device-shared-styles";
@@ -59,19 +59,19 @@ class MatterAddDeviceGoogleHomeFallback extends LitElement {
`ui.dialogs.matter-add-device.google_home_fallback.code_instructions`
)}
-
+ >
`;
}
- private _onCodeChanged(ev: any) {
- const value = ev.currentTarget.value;
+ private _onCodeChanged(ev: InputEvent) {
+ const value = (ev.target as HTMLInputElement).value;
this._code = value;
fireEvent(this, "pairing-code-changed", { code: value });
}
diff --git a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-shared-styles.ts b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-shared-styles.ts
index 721e8514be..2f0bcbfe96 100644
--- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-shared-styles.ts
+++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-shared-styles.ts
@@ -29,7 +29,7 @@ export const sharedStyles = css`
--md-list-item-trailing-space: var(--horizontal-padding, 16px);
margin-bottom: 16px;
}
- ha-textfield {
+ ha-input {
width: 100%;
}
`;
diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
index cc3878319b..361aa2d16f 100644
--- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
+++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
@@ -8,6 +8,7 @@ import "../../../../../components/ha-code-editor";
import "../../../../../components/ha-formfield";
import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
import "../../../../../components/ha-switch";
+import "../../../../../components/input/ha-input";
import { getConfigEntries } from "../../../../../data/config_entries";
import type { Action } from "../../../../../data/script";
import { callExecuteScript } from "../../../../../data/service";
@@ -80,11 +81,11 @@ export class MQTTConfigPanel extends LitElement {
>