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

brandyscarney · 2026-08-03T21:16:50Z

Issue number: N/A

What is the current behavior?

Textareas with a floating label and a start or end slot always display the label in the floated state, regardless of whether the textarea 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 textarea when the field is empty.
- It floats when the textarea is focused or contains a value.
The height of textareas has been increased to ensure consistent sizing among all textareas.
Start slot content is now always positioned to the left of both the label and the input.
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

Floating Label Behavior

Floating labels no longer automatically float when the textarea contains slotted content. Labels float only when the textarea is focused or has a value.

Internal DOM Structure Changes

The internal DOM structure has been reorganized to support floating labels with slotted content.

Removed: .textarea-wrapper-inner

Added: .textarea-control

Renamed:

.start-slot-wrapper → .textarea-start
.end-slot-wrapper → .textarea-end

Restructured:

.label-text-wrapper moved from .textarea-wrapper-inner into .textarea-control
.native-wrapper moved from .textarea-wrapper-inner into .textarea-control
.start-slot-wrapper moved from .textarea-wrapper-inner to .textarea-wrapper and was renamed .textarea-start
.end-slot-wrapper moved from .textarea-wrapper-inner to .textarea-wrapper and was renamed .textarea-end

Update your selectors to account for these structural changes:

-ion-textarea .textarea-wrapper-inner .native-wrapper { }
+ion-textarea .textarea-control .native-wrapper { }

-ion-textarea .start-slot-wrapper [slot="start"] { }
+ion-textarea .textarea-start [slot="start"] { }

-ion-textarea .end-slot-wrapper [slot="end"] { }
+ion-textarea .textarea-end [slot="end"] { }

Minimum Height Change

The minimum height of textarea in Material Design (md mode) is now 72px. At the default number of rows this makes textareas the same height regardless of the fill property or labelPlacement. Previously the minimum height was:

Fill	Label placement	Previous minimum height
default	`start`, `end`, `fixed`	`44px`
default	`floating`, `stacked`	`56px`
`solid`, `outline`	any	`56px`

These were minimums, not the heights textareas actually rendered at. A textarea with content in the start or end slots was already taller than its minimum, so the change affects it differently. For example, a fill="solid" textarea with slotted icons and buttons previously rendered at 72px with a start label and 81px with a floating label. Both are now 72px, so that floating label case is 9px shorter than before rather than taller.

Because 72px is taller than two rows of text, rows values below 3 no longer change the height of the textarea in md mode: rows="1" and rows="2" both render at 72px.

If you were relying on the previous heights, or you need rows to control the height, override the minimum height back. The override has to be more specific than the component's own style, so a bare ion-textarea selector will not apply. Add a custom class to the textarea to increase specificity:

/* Add a custom class to the textarea */
ion-textarea.custom {
  min-height: 44px;
}

Other information

Preview

vercel · 2026-08-03T21:16:56Z

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

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview	Aug 14, 2026 2:00pm

brandyscarney · 2026-08-03T21:23:46Z

-              <slot name="start"></slot>
-            </div>
+          {hasOutlineFill && <div class="textarea-outline-container">{this.renderOutlineDecorations()}</div>}
+          <div class="textarea-start">


I renamed the slot wrapper divs from the following:

start-slot-wrapper → textarea-start

end-slot-wrapper → textarea-end

The goal was to align the naming with the wrapper elements added to Input.

This also matches our existing naming pattern with elements like input-bottom and textarea-bottom.

brandyscarney · 2026-08-03T21:52:45Z

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

brandyscarney · 2026-08-03T21:53:09Z


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


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

…re changed

…id truncation

ShaneK

Awesome work! These two issues are mostly nits and they assume this branch gets the fixes from the input branch (which it looks like they did while I was reviewing this)

ShaneK · 2026-08-13T17:31:33Z

@@ -16,6 +16,10 @@
  --padding-start: 0px;
  --highlight-height: 2px;

+  // Setting the min-height to 72px enforces consistent heights
+  // across all label placements and fills.
+  min-height: 72px;


The rule this replaced set min-height: 56px for floating and stacked in the shared stylesheet, so putting the replacement only in the md file drops ios back to the base 44px.

Computed min-height on ios floating is 56px on major-9.0 and 44px here, and with rows="1" an ios floating textarea goes 98px to 74px. Should this live in the shared stylesheet instead? Either way it probably warrants a line in the breaking changes doc.

I added the min-height: 56px back for ios: 014db57

I tried generating screenshots locally but saw no changes. Will see if the CI yells about it.

ShaneK · 2026-08-13T17:33:09Z

+
+**Minimum Height Change**
+
+The minimum height of textarea in Material Design (`md` mode) has been increased from `56px` to `72px`. Textareas are now the same height regardless of the `fill` property or `labelPlacement`. If you were relying on textareas being `56px` tall or had custom CSS based on that value, update your styles for the new `72px` height or override it back to `56px`.


The 56px was only the floor for solid, outline and stacked/floating. Default fill with start, end or fixed sat on the shared 44px, so it's 44 to 72 there, and overriding back to 56px like this suggests leaves you taller than before.

Worth a word on rows too. On md start, rows="1" goes 44px to 72px and rows="2" 62px to 72px, so those two look the same now. ios changed as well and isn't mentioned.

Updated breaking changes to mention the rows change: b5f498b

Also created a follow-up ticket to revisit this later.

thetaPC

LGTM, just minor docs: .textarea-wrapper-inner is still mentioned in docs/shadow-parts-guidelines.md.

thetaPC · 2026-08-14T15:58:33Z

@@ -167,11 +240,147 @@ <h2>Outline / Autogrow</h2>
          </div>
        </div>

+        <h1>Overflowing Slots</h1>


Same weird label rendering as input. Again, it can be a follow up.

The label issue exists on main but I added it as a note for the follow-up ticket FW-7683.

For the shadow parts guidelines I made the update on Select since this seems to have been copied over from next where textarea is Shadow. I removed the notes about Textarea parts because it is still scoped on this branch: d2ded42

feat(textarea): support floating labels with slotted content

4b6186b

brandyscarney changed the base branch from main to major-9.0 August 3, 2026 21:17

github-actions Bot added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Aug 3, 2026

brandyscarney commented Aug 3, 2026

View reviewed changes

brandyscarney added 2 commits August 3, 2026 17:51

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

bbcc734

chore(): remove old snapshots

2662a5c

github-actions Bot removed package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Aug 3, 2026

brandyscarney commented Aug 3, 2026

View reviewed changes

chore(): add updated snapshots

5efd430

vercel Bot deployed to Preview August 3, 2026 22:00 View deployment

fix(textarea): target buttons specifically for smaller margin top

667da5c

vercel Bot deployed to Preview August 3, 2026 22:24 View deployment

Ionitron and others added 2 commits August 4, 2026 14:19

chore(): add updated snapshots

450d154

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

86bdbf7

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

copy editing

4f02aa9

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

brandyscarney added 2 commits August 5, 2026 15:19

docs(breaking): add a note about the min height change

bf98a5d

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

c25a43b

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

fix(textarea): disable the label transition when start or end slots a…

3c75c3f

…re changed

vercel Bot deployed to Preview August 6, 2026 19:43 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

vercel Bot deployed to Preview August 11, 2026 18:50 View deployment

refactor(textarea): remove outdated skipLabelTransition State

0145d69

vercel Bot deployed to Preview August 11, 2026 18:57 View deployment

refactor(textarea): remove old code and update outline container render

1d1cced

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

docs(textarea): update breaking changes to clarify structural changes

b1cebc0

vercel Bot deployed to Preview August 12, 2026 16:04 View deployment

test(textarea): add missing awaits

ba162df

vercel Bot deployed to Preview August 12, 2026 16:17 View deployment

test(textarea): split functional checks and improve comparisons

f5763ec

vercel Bot deployed to Preview August 12, 2026 18:56 View deployment

fix(textarea): recalculate start container width on render

958f88a

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

fix(textarea): position the label relative to textarea-wrapper to avo…

97fa51a

…id truncation

vercel Bot deployed to Preview August 12, 2026 23:39 View deployment

fix(textarea): do not propagate clicks for non-slotted content

143fb20

vercel Bot deployed to Preview August 13, 2026 15:32 View deployment

fix(textarea): emit a single click when pressing a slotted textarea

7ea840a

vercel Bot deployed to Preview August 13, 2026 17:05 View deployment

ShaneK approved these changes Aug 13, 2026

View reviewed changes

brandyscarney added 2 commits August 13, 2026 15:40

fix(textarea): properly ellipsis labels when slot content is wide

df9d9ef

test(textarea): add test and screenshots for overflow behavior

2b5bccd

vercel Bot deployed to Preview August 13, 2026 20:03 View deployment

fix(textarea): add min-height back for ios

014db57

vercel Bot deployed to Preview August 13, 2026 22:19 View deployment

docs(breaking): update textarea min height to include more details

b5f498b

vercel Bot deployed to Preview August 13, 2026 22:26 View deployment

style: add code comments

a68fa2c

vercel Bot deployed to Preview August 14, 2026 14:00 View deployment

thetaPC approved these changes Aug 14, 2026

View reviewed changes

Navigation Menu

Uh oh!

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

fix(textarea): support floating labels with slotted content#31321
brandyscarney wants to merge 36 commits into
major-9.0from
FW-6471-textarea

brandyscarney commented Aug 3, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Aug 3, 2026 •

edited

Loading

Uh oh!

brandyscarney Aug 3, 2026 •

edited

Loading

Uh oh!

brandyscarney Aug 3, 2026

Uh oh!

brandyscarney Aug 3, 2026

Uh oh!

ShaneK left a comment •

edited

Loading

Uh oh!

ShaneK Aug 13, 2026

Uh oh!

brandyscarney Aug 13, 2026

Uh oh!

ShaneK Aug 13, 2026

Uh oh!

brandyscarney Aug 13, 2026

Uh oh!

thetaPC left a comment

Uh oh!

thetaPC Aug 14, 2026

Uh oh!

brandyscarney Aug 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants


		Minimum Height Change

		The minimum height of textarea in Material Design (`md` mode) has been increased from `56px` to `72px`. Textareas are now the same height regardless of the `fill` property or `labelPlacement`. If you were relying on textareas being `56px` tall or had custom CSS based on that value, update your styles for the new `72px` height or override it back to `56px`.

Uh oh!

Conversation

brandyscarney commented Aug 3, 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 Aug 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brandyscarney Aug 3, 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!

Choose a reason for hiding this comment

Uh oh!

ShaneK left a comment • 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!

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!

thetaPC 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

brandyscarney commented Aug 3, 2026 •

edited

Loading

vercel Bot commented Aug 3, 2026 •

edited

Loading

brandyscarney Aug 3, 2026 •

edited

Loading

ShaneK left a comment •

edited

Loading