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 7, 2026 9:07pm

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!

ShaneK · 2026-08-07T16:42:43Z

+   * Only applies to inputs with `md` mode and `fill="outline"`.
+   * In RTL mode, the adjustment is positive; in LTR mode, it's negative.
+   */
+  private getStartSlotAdjustment(): string {


Calling getBoundingClientRect() from inside render() means the value only refreshes when something triggers a re-render, and it forces a sync layout on every render, including focus, blur and value changes that have nothing to do with slots.

The part that doesn't recover is a start slot changing width without a DOM mutation. Nothing re-measures and the label just stays wrong. Both of these have the same start slot width, the bottom one only got there after mount, which is what a late loading web font does:

There's a smaller version of this on first paint too, where .input-start doesn't exist yet so the first render gets an empty string and the label slides about 32px into place over the 150ms transition. That one's easy to miss while the form is still appearing, so the stale case is the one I'd worry about.

The NotchController already solves this shape for the notch: it defers with raf(), measures, then writes with style.setProperty(), driven from componentDidRender() which this component already calls. A ResizeObserver on .input-start would cover the width change case as well.

ShaneK · 2026-08-07T16:45:33Z

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


The two functionality tests came out and nothing replaced them, so this file is all screenshots now. hasValue is covered eight ways but hasFocus isn't covered at all, and floating on focus is the headline behaviour of the fix.

A few other gaps: end slot only, which is exactly what the removed test covered, stacked, and the runtime add/remove slot path that skipLabelTransition exists for. Both test/color and test/highlight set class="has-focus" on the host for deterministic focus screenshots if that helps.

Since the contract inverted rather than disappeared, could the old assertion come back the other way round, something like not.toHaveClass(/label-floating/) when the slots are populated and the input is empty? A screenshot diff tells you something moved, but not which rule broke.

ShaneK · 2026-08-07T16:48:10Z

  --border-radius: 4px;
  --padding-start: 16px;
  --padding-end: 16px;
+  --start-slot-adjustment: 0px;


Should this get the same private API comment as --highlight-color? It's sitting right next to --border-radius and --padding-start which are both @prop documented, so as it is now it looks like something people can set.

Also wondering about a fallback on the var(). Without one a missing property invalidates the whole transform, so the label would lose its scale() too and not just the translate.

Since we decided we would mark internal css variables with --internal for modular Ionic I chose to do that instead of adding a comment. I also don't think the fallback should be reached since it is set by default here, but I added it anyway.

Input fix: 4aedde9

Textarea fix: a595a64

Select fix: ffe8326

ShaneK · 2026-08-07T16:50:13Z

+       */
+      this.skipLabelTransition = true;
+
+      requestAnimationFrame(() => {


There's a raf() helper in @utils/helpers that's the zone-patched wrapper, and it's what the notch controller this component already depends on uses. Any reason not to use it here?

This also isn't cancelled in disconnectedCallback(), so a slot mutation landing in the same frame the input is removed will set state on a torn down component. Minor, but the other controllers are cleaned up there already.

Input fix: 3fcf658

Textarea fix: 6278723

Select fix: 9a7b423

…lback

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

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

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

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!

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!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

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

brandyscarney Aug 7, 2026 •

edited

Loading

brandyscarney Aug 7, 2026 •

edited

Loading