[textarea] Implement Textarea component with auto-resize

[sernstberger]

Summary

Implements the Textarea component requested in #718.

Parts

• Textarea.Root — renders a <textarea> with auto-resize support. Integrates with Field for validation, labeling, and state management (dirty, touched, focused, filled).
• Textarea.CharacterCount — standalone <span> that displays character count with data-approaching state (>80% of max).

Auto-resize

Uses CSS field-sizing: content where supported (Chrome 123+, Safari 17.4+, Edge 123+), with a JS measurement fallback for Firefox and older browsers. The fallback resets height to 0, reads scrollHeight, and sets height — all inside a layout effect to avoid flicker.

Supports minRows and maxRows constraints. When content exceeds maxRows, the textarea becomes scrollable.

Usage

import { Field } from '@base-ui/react/field';
import { Textarea } from '@base-ui/react/textarea';

// Simple
<Textarea.Root />

// With Field integration + character count
<Field.Root>
  <Field.Label>Feedback</Field.Label>
  <Textarea.Root minRows={3} maxRows={8} maxLength={500} />
  <Textarea.CharacterCount value={value} maxLength={500} />
  <Field.Error match="valueMissing">Required</Field.Error>
</Field.Root>

Props

Textarea.Root:

• autoResize (default true) — enable/disable auto-resize
• minRows (default 1) — minimum visible rows
• maxRows — maximum rows before scrolling
• maxLength — native maxlength attribute
• value / defaultValue / onValueChange — controlled/uncontrolled
• All standard textarea and Field.Control props

Textarea.CharacterCount:

• value — current textarea value
• maxLength — max character count
• children — optional render function ({ count, maxLength }) => ReactNode
• data-approaching — set when count exceeds 80% of max

What's not included (intentionally)

• contenteditable support (incompatible with constraint validation API, per discussion in [textarea] Add a Textarea component #718)
• ScrollArea integration (left to userland)
• Documentation/demos (can follow in a separate PR)

Test plan

• 49 tests passing (25 root + 24 character count)
• Conformance tests (ref forwarding, prop spreading, render prop, className)
• Controlled and uncontrolled value management
• Field integration (label association, data-dirty, data-touched, data-focused)
• Character count display, approaching threshold, custom render function
• TypeScript type check clean
• ESLint clean

Closes #718

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@4630
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@4630
  

commit: 6ac0e4f

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+3.24KB(+0.70%)	🔺+1.12KB(+0.76%)

Details of bundle changes

Performance

Total duration: 1,533.36 ms 🔺+280.45 ms^(+22.4%) | Renders: 53 ⁽⁺⁰⁾ | Paint: 2,366.10 ms 🔺+411.70 ms^(+21.1%)

Test	Duration	Renders
Checkbox mount (500 instances)	104.97 ms 🔺+32.38 ms(+44.6%)	1 (+0)
Select open (500 options)	59.29 ms 🔺+15.63 ms(+35.8%)	14 (+0)
Dialog mount (300 instances)	98.19 ms 🔺+23.48 ms(+31.4%)	2 (+0)
Select mount (200 instances)	180.89 ms 🔺+43.20 ms(+31.4%)	3 (+0)
Scroll Area mount (300 instances)	108.95 ms 🔺+25.63 ms(+30.8%)	3 (+0)

...and 7 more. View full report

Details of benchmark changes

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	6ac0e4f
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/69e12a522f46920008f919c4
😎 Deploy Preview	https://deploy-preview-4630--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mj12albert]

@sernstberger Appreciate the effort, we decided to not provide this component: #718 (comment)