Textarea

Multi-line text form control with auto-grow, character counter, validation, and optional prefix/suffix icons.

HTML tag: c-e333beb6d0c9048dfb0c0cfff99b86355

When to use

• multi-line description or comment field
• long text with character counter
• auto-growing text area

Props

Prop	Type	Default	Description
value	string
label	string
placeholder	string
status	string	default
required	boolean
disabled	boolean
readonly	boolean
clearable	boolean
maxlength	number
counter	boolean
rows	number	3
auto_grow	boolean	true
helper_text	string
error_text	string
min_rows	number	3
max_rows	number	10
name	string
autocomplete	string	on
spellcheck	boolean	true
label_position	string	stacked
tone	string	neutral
size	string	md
density	string	comfortable
prefix_icon	string
suffix_icon	string
prefix_clickable	boolean
suffix_clickable	boolean
clear_on_escape	boolean
icon_loading	boolean
aria_label	string
aria_describedby	string

Rules

• Same event pattern as ab-input: input-changed (live), value-committed (final), validated.
• Use rows/min_rows/max_rows and auto_grow for height.
• maxlength + counter for limits.
• label_position is stacked only.

Events

Event	Detail
input-changed	value: string
value-committed	value: string
validated	valid: boolean, errors: array
cleared
focus
blur
prefix-click	originalEvent: Event
suffix-click	originalEvent: Event

Methods

Signature	Description
focus()
blur()
select()
setValue(value: string, options: object)
validate()
clear()

What to avoid

Do not use ab-input with many rows hack. Do not use for short labels under 2 lines unless UX requires auto-grow textarea.

Example

<c-e333beb6d0c9048dfb0c0cfff99b86355 .label=${'Description'} .value=${desc} .rows=${4} .maxlength=${500} .counter=${true} @value-committed=${onDescCommit}></c-e333beb6d0c9048dfb0c0cfff99b86355>