fix(input): support floating labels with slotted content

[brandyscarney]

Issue number: resolves #29449 resolves #28665

---

What is the current behavior?

Inputs with a floating label and a start or end slot always display the label in the floated state, regardless of whether the input contains a value:

without value	with value

What is the new behavior?

• The floating label now behaves consistently regardless of whether start or end slots are present:
  • It overlays the input when the field is empty.
  • It floats when the input is focused or contains a value.
• The height of inputs with start or end slots has been reduced to match the md specification.
• Start slot content is now always positioned to the left of both the label and the input.
• The clear button is now vertically centered within the entire input container, rather than only the input element.
• Additional screenshot tests have been added to verify these behavior and layout changes.
• A follow-up ticket has been created to address the remaining UI differences between our leading/trailing content implementation and the md specification.

Does this introduce a breaking change?

• Yes
• No

Internal DOM Structure Changes

New wrapper elements have been added to the component's internal DOM structure to support floating labels with slotted start and end content. Additionally, the structure of the component has been reorganized, with some elements now grouped differently than before. This may introduce breaking changes for developers who rely on the component's internal DOM structure or apply custom styling to internal elements.

The following internal wrapper elements have been added:

• Added: <div class="input-start"> wrapper for the start slot
• Added: <div class="input-control"> wrapper for the label and native control
• Added: <div class="input-end"> wrapper for the end slot and clear button

While the public API has not changed, selectors or style overrides targeting the previous markup may need to be updated to reference the new wrapper elements and their organization. If you have custom CSS targeting the internal structure of input, update your selectors to account for these structural changes.

Other information

Preview

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview	Aug 5, 2026 7:26pm

[brandyscarney]

I renamed these screenshots from input-slots to input-slot to match the folder name.

[brandyscarney]

This was updated to match the folder name, following how we title other tests.

[brandyscarney]

This is the correct height and label position for Material Design filled inputs. See: https://m2.material.io/components/text-fields

[brandyscarney]

This 1px shift was caused by the removal of this rule:

ionic-framework/core/src/components/input/input.scss

Lines 562 to 569 in 048788f

	/**
	* Ensures the input does not
	* overlap the label.
	*/
	:host(.input-label-placement-stacked) input,
	:host(.input-label-placement-floating) input {
	@include margin(1px, 0, 0, 0);
	}

However, this is actually more aligned than before:

[brandyscarney]

This 1px shift was caused by the removal of this rule:

ionic-framework/core/src/components/input/input.scss

Lines 562 to 569 in 048788f

	/**
	* Ensures the input does not
	* overlap the label.
	*/
	:host(.input-label-placement-stacked) input,
	:host(.input-label-placement-floating) input {
	@include margin(1px, 0, 0, 0);
	}

[brandyscarney]

This 1px shift was caused by the removal of this rule:

ionic-framework/core/src/components/input/input.scss

Lines 562 to 569 in 048788f

	/**
	* Ensures the input does not
	* overlap the label.
	*/
	:host(.input-label-placement-stacked) input,
	:host(.input-label-placement-floating) input {
	@include margin(1px, 0, 0, 0);
	}

[brandyscarney]

This 1px shift was caused by the removal of this rule:

ionic-framework/core/src/components/input/input.scss

Lines 562 to 569 in 048788f

	/**
	* Ensures the input does not
	* overlap the label.
	*/
	:host(.input-label-placement-stacked) input,
	:host(.input-label-placement-floating) input {
	@include margin(1px, 0, 0, 0);
	}

[brandyscarney]

The clear input button was updated to be vertically centered based on the entire input container. This aligns with how md treats any trailing icon/button: