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 displayed the label in the floated state, regardless of whether the input contained 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.
• The md clear button icon has been updated from closeSharp to closeCircleSharp.
• 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

Due to the structural changes required to support the updated layout, and because Input is a scoped component, this change has the potential to introduce breaking changes for developers who rely on the component's internal DOM structure or apply custom styling to internal elements. While the public API has not changed, selectors or style overrides targeting the previous markup may need to be updated.

Additionally, the default clear button icon for md has changed from closeSharp to closeCircleSharp. Developers who prefer the previous appearance can restore it by setting clearInputIcon to closeSharp.

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	Jul 31, 2026 5:18pm

[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]

I updated the icon for Material Design per the spec:

[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]

I updated the icon for Material Design per the spec:

[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: