Skip to content

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

Draft
brandyscarney wants to merge 5 commits into
major-9.0from
FW-6471-textarea
Draft

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

Conversation

@brandyscarney

Copy link
Copy Markdown
Member

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

Due to the structural changes required to support the updated layout, and because Textarea is a scoped component, this change has the potential to introduce breaking changes for developers who rely on the component's internal DOM structure or apply custom styling to internal elements. While the public API has not changed, selectors or style overrides targeting the previous markup may need to be updated.

Other information

Preview

@vercel

vercel Bot commented Aug 3, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview Aug 3, 2026 10:24pm

Request Review

@brandyscarney
brandyscarney changed the base branch from main to major-9.0 August 3, 2026 21:17
@github-actions 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
<slot name="start"></slot>
</div>
{hasOutlineFill && <div class="textarea-outline-container">{this.renderOutlineDecorations()}</div>}
<div class="textarea-start">

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I renamed the slot wrapper divs from the following:

  • start-slot-wrappertextarea-start
  • end-slot-wrappertextarea-end

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

If we have better ideas for the naming I can change them, but Input wraps more than slotted content which is why I made them more generic.

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

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

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


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

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants