Textarea

A multi-line text input component with validation and native form participation.

Basic Usage

Default Textarea

Basic textarea with label.

<ae-textarea label="Description" placeholder="Enter description..."></ae-textarea>

Rows

Custom Rows

Control the initial height with rows attribute.

<div class="demo-column">
<ae-textarea label="Short" rows="2" placeholder="2 rows"></ae-textarea>
<ae-textarea label="Medium" rows="4" placeholder="4 rows (default)"></ae-textarea>
<ae-textarea label="Tall" rows="6" placeholder="6 rows"></ae-textarea>
</div>

States

Textarea States

Disabled, readonly, and error states.

<div class="demo-column">
<ae-textarea label="Disabled" value="Cannot edit this content" disabled></ae-textarea>
<ae-textarea label="Readonly" value="Read only content" readonly></ae-textarea>
<ae-textarea label="With Error" error="This field is required"></ae-textarea>
</div>

Validation

Required & Length Validation

Built-in validation support.

<div class="demo-column">
<ae-textarea label="Required" required placeholder="This field is required"></ae-textarea>
<ae-textarea label="Min/Max Length" minlength="10" maxlength="200" help-text="10-200 characters"></ae-textarea>
</div>

Resize Control

Resize Options

Control how users can resize the textarea.

<div class="demo-column">
<ae-textarea label="Vertical Only" resize="vertical" placeholder="Can resize vertically"></ae-textarea>
<ae-textarea label="No Resize" resize="none" placeholder="Cannot resize"></ae-textarea>
</div>

pnpm add @aetherui-kit/core

npm install @aetherui-kit/core

Import

import { defineAeTextarea } from '@aetherui-kit/core/textarea';
defineAeTextarea();

Props

Name	Type	Default	Description
`value`	`string`	`''`	Current value
`placeholder`	`string`	`''`	Placeholder text
`label`	`string`	`''`	Label text
`name`	`string`	`''`	Form field name
`rows`	`number`	`4`	Number of visible rows
`disabled`	`boolean`	`false`	Disabled state
`required`	`boolean`	`false`	Required field
`readonly`	`boolean`	`false`	Read-only state
`error`	`string`	`''`	Error message
`help-text`	`string`	`''`	Helper text
`minlength`	`number`	-	Minimum length
`maxlength`	`number`	-	Maximum length
`resize`	`'none' \| 'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	Resize behavior

Events

Name	Detail	Description
`ae-textarea-input`	`{ value: string }`	Fired on input
`ae-textarea-change`	`{ value: string }`	Fired on change

CSS Parts

Name	Description
`base`	Base wrapper
`label`	Label element
`textarea`	Native textarea
`help-text`	Help text
`error-text`	Error message