fix(input): support floating labels with slotted content by brandyscarney · Pull Request #31309 · ionic-team/ionic-framework

brandyscarney · 2026-07-30T21:25:53Z

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 · 2026-07-30T21:25:59Z

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

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

brandyscarney · 2026-07-31T13:20:54Z

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

brandyscarney · 2026-07-31T13:21:18Z


 configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('input: start and end slots (visual checks)'), () => {
+  test.describe(title('input: slot'), () => {


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

brandyscarney · 2026-07-31T13:23:47Z

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

brandyscarney · 2026-07-31T13:24:15Z

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 · 2026-07-31T13:24:36Z

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 · 2026-07-31T13:24:45Z

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 · 2026-07-31T13:25:49Z

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 · 2026-07-31T13:51:26Z

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:

… too

…changed

ShaneK

This is looking really great! I had some feedback on a few issues and some minor things, but really looking good!

…lback

…lass

ShaneK

Thanks for the changes! I found a few more issues in this one, some are just test cleanup, most should be easy to implement I hope 🤞

ShaneK · 2026-08-11T22:02:34Z

+      }
+    );
+
+    this.startContainerController.calculateStartContainerWidth();


Calling this only from connectedCallback and the slot mutation callback means a runtime fill change never re-measures, which is why calculateNotchWidth runs from componentDidRender.

With a [fill] binding resolving to outline after the component settles, the adjustment stays at 0px and the label sits 35px right of the notch, on the border instead of inside the cut-out. A static fill="outline" gets -32px. The ResizeObserver never attaches either, so widening the start slot afterwards drifts it 115px off. A runtime dir flip goes stale the same way.

Calling this from componentDidRender covers both.

ShaneK · 2026-08-11T22:06:21Z

@@ -100,16 +101,6 @@
  max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$input-md-floating-label-padding * 2}) / #{$form-control-label-stacked-scale});


The percentage now resolves against .input-control, but the formula still subtracts --padding-start and --padding-end, which .input-control already excludes. So the padding comes off twice.

With no slots the available label width drops from 427px to 384px, which is the 32px of padding over the 0.75 scale. With start and end slots it's 187px. Long labels truncate earlier than intended and no screenshot covers that.

ShaneK · 2026-08-11T22:09:51Z

+   * input field) to prevent double-click events. Allows clicks on slotted
+   * content to propagate so event delegation works for parent handlers.
   */
  private onLabelClick = (ev: MouseEvent) => {


Since .input-control sits inside the label's content box, it never covers the padding. With fill="solid" that's 16px each side, and a click there targets the label itself, so nothing stops it. That strip goes from one click on major-9.0 to two here. Default fill is fine since its padding is 0.

The earlier commit that dropped the ev.target === ev.currentTarget guard is what broke slotted propagation. Excluding slotted content instead covers every case, and also the fill="outline" strip, which is two clicks on both branches:

if (target.closest('[slot="start"], [slot="end"]') === null) { ev.stopPropagation(); }

ShaneK · 2026-08-11T22:13:26Z

    });
+
+    test('should propagate clicks from start slot button to parent', async ({ page }) => {
+      page.setContent(


Suggested change

page.setContent(

await page.setContent(

Missing an await here, and on the end slot test below. Every other setContent in this file awaits it, and it's what waits for hydration.

ShaneK · 2026-08-11T22:16:11Z

+          return computedStyle.getPropertyValue('--internal-start-container-adjustment');
+        });
+
+        expect(adjustment).toMatch(/-?\d+\.?\d*px/);


The stylesheet declares this property as 0px, which satisfies that regex, so this passes whether or not the measurement ran. The runtime fill case computes 0px and would still pass here. Asserting the value tracks the measured start width would catch it.

ShaneK · 2026-08-11T22:18:08Z


+**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.


This covers the three added wrappers but not what moved out of .native-wrapper, which is the part anyone with custom CSS needs. The start slot, end slot and clear button all left it, and the label is no longer a direct child of the wrapper, so a selector like .native-wrapper [slot="start"] stops matching.

The behavior change is missing too. Floating labels no longer auto-float with a start or end slot present, which also hides the placeholder at rest.

The same text is in the v9 migration guide PR, so both would want the update.

ShaneK · 2026-08-11T22:19:53Z

+ * The solid and outline fills are only supported by `md` mode.
+ */
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: slot'), () => {


Both describe blocks have the same title now. Textarea and select split theirs into visual checks and functionality checks, and this file did too before.

brandyscarney and others added 12 commits July 30, 2026 12:14

fix(input): float label when start and end slot exist

71a8fc3

test(input): update slot test

5e98726

fix(input): always stop label click propagation

7adbc3e

chore(): add updated snapshots

7dddcf7

fix(input): reverse the row on input-content for end labels

26c8c13

chore(): add updated snapshots

be85bad

chore(): add updated snapshots

375995b

fix(input): account for RTL and vertically center the clear input

7c4e480

test(input): rename tests and add fill and rtl coverage

f8e5be6

chore(): add updated snapshots

106dfea

test(input): capture slot behavior when value is not present

9ef4d4b

chore(): add updated snapshots

eaeada8

github-actions Bot added the package: core @ionic/core package label Jul 30, 2026

style: lint

996134f

vercel Bot deployed to Preview July 30, 2026 21:48 View deployment

brandyscarney commented Jul 31, 2026

View reviewed changes

chore(): add updated snapshots

fd0557a

vercel Bot deployed to Preview July 31, 2026 13:39 View deployment

brandyscarney commented Jul 31, 2026

View reviewed changes

brandyscarney changed the title ~~fix(input): float label when start and end slot exist~~ fix(input): support floating labels with slotted content Jul 31, 2026

fix(input): style the right element for flex

3072291

vercel Bot deployed to Preview July 31, 2026 17:18 View deployment

fix(input): revert icon change - we need to do it in other components…

1483023

… too

chore(): add updated snapshots

cc20bbf

vercel Bot deployed to Preview August 3, 2026 19:07 View deployment

style(input): remove extra label function

4ac30a6

vercel Bot deployed to Preview August 3, 2026 20:49 View deployment

brandyscarney mentioned this pull request Aug 3, 2026

fix(textarea): support floating labels with slotted content #31321

Open

2 tasks

brandyscarney added 2 commits August 5, 2026 12:13

docs(breaking): add a section for input structural changes

892f6e7

copy editing

921b54e

vercel Bot deployed to Preview August 5, 2026 16:21 View deployment

Merge branch 'major-9.0' into FW-6471-input

6c81728

vercel Bot deployed to Preview August 5, 2026 19:26 View deployment

fix(input): disable the label transition when start or end slots are …

93e14a0

…changed

vercel Bot deployed to Preview August 6, 2026 19:45 View deployment

brandyscarney mentioned this pull request Aug 6, 2026

docs(updating): update v9 migration guide to add missing breaking changes ionic-team/ionic-docs#4620

Open

brandyscarney marked this pull request as ready for review August 7, 2026 14:39

brandyscarney requested a review from a team as a code owner August 7, 2026 14:39

brandyscarney requested a review from ShaneK August 7, 2026 14:39

ShaneK requested changes Aug 7, 2026

View reviewed changes

Comment thread core/src/components/input/input.tsx Outdated

Comment thread core/src/components/input/test/slot/input.e2e.ts

Comment thread core/src/components/input/input.md.outline.scss Outdated

Comment thread core/src/components/input/input.tsx Outdated

fix(input): allow click propagation for slotted content

9b59417

vercel Bot deployed to Preview August 7, 2026 19:33 View deployment

brandyscarney added 2 commits August 7, 2026 16:57

refactor(input): call raf from utils and cancel it in disconnectedCal…

3fcf658

…lback

refactor(input): mark slot var as internal and add fallback

4aedde9

vercel Bot deployed to Preview August 7, 2026 21:07 View deployment

refactor(input): move the start container width logic to a controller

85e105a

vercel Bot deployed to Preview August 10, 2026 22:32 View deployment

test(input): add tests for label-floating and skip-label-transition c…

8b29fe1

…lass

vercel Bot deployed to Preview August 11, 2026 15:40 View deployment

brandyscarney requested a review from ShaneK August 11, 2026 16:30

refactor(input): update outline function to include container div

7df2591

vercel Bot deployed to Preview August 11, 2026 19:17 View deployment

ShaneK requested changes Aug 11, 2026

View reviewed changes

	/**
	* 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);
	}

		@@ -100,16 +101,6 @@
		max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$input-md-floating-label-padding * 2}) / #{$form-control-label-stacked-scale});


		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.

Uh oh!

Conversation

brandyscarney commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel Bot commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

brandyscarney commented Jul 30, 2026 •

edited

Loading

vercel Bot commented Jul 30, 2026 •

edited

Loading