fix(textarea): support floating labels with slotted content

[brandyscarney]

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]

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

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

[brandyscarney]

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]

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

[brandyscarney]

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

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

[thetaPC]

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