Textarea

Multi-line text input for longer content.

Basic textarea

<textarea class="af-textarea" placeholder="Enter your message">
</textarea>

With rows

<textarea class="af-textarea" rows="6" placeholder="Enter your message">
</textarea>

Auto-grow textarea

Textareas can automatically grow with content using the af-is-auto-grow class. This uses the modern CSS field-sizing: content property (supported in Chrome 123+ and Edge 123+).

<textarea class="af-textarea af-is-auto-grow" placeholder="This textarea grows with content">
</textarea>

Browser Support: The CSS field-sizing: content property is supported in Chrome 123+ and Edge 123+. For full browser support, install and import the polyfills package:

npm install @airframeui/polyfills

// In your entry file
import '@airframeui/polyfills';

The polyfills automatically detect browser support and only apply JavaScript fallbacks when needed. See the Browser Support documentation for framework-specific examples and our browser support philosophy.

States

<textarea class="af-textarea" placeholder="Normal">
</textarea>
<textarea class="af-textarea" aria-invalid="true" placeholder="Error state">
</textarea>
<textarea class="af-textarea" disabled placeholder="Disabled">
</textarea>

Live example