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

Internal DOM Structure Changes

The internal DOM structure has been modified 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 elements have been modified:

• Removed: <div class="textarea-wrapper-inner">
• Renamed: <div class="start-slot-wrapper"> is now <div class="textarea-start">
• Added: <div class="textarea-control"> wrapper for the label and native control
• Renamed: <div class="end-slot-wrapper"> is now <div class="textarea-end">

While the public API has not changed, selectors or style overrides targeting the previous markup will need to be updated to reference the new element names and their organization. If you have custom CSS targeting the internal structure of textarea, update your selectors to account for these structural changes.

Minimum Height Change

The minimum height of textarea in Material Design (md mode) has been increased from 56px to 72px. This change ensures consistent heights across textareas regardless of the fill property or labelPlacement, providing a more uniform and predictable user experience. If you were relying on textareas being 56px tall or had custom CSS based on that value, you will need to either update your styles to accommodate the new 72px height or override it back to 56px if needed.

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 5, 2026 7:26pm

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