Props

Prop	Type	Default	Description
v-model	string	—	Required. Text content.
label	string	—	Required. Field name.
id	string	—	Prefix for associated IDs. Auto-generated when omitted.
size	'sm' | 'md' | 'lg'	md	Text area height.
rows	number	—	Native textarea rows.
cols	number	—	Native textarea cols.
minlength	number | string	—	Native textarea minlength.
maxlength	number | string	—	Native textarea maxlength.
wrap	'soft' | 'hard'	soft	Native textarea wrap.
resize	'none' | 'both' | 'horizontal' | 'vertical'	vertical	Native textarea resize. Vertical dragging is enabled by default.
placeholder	string	—	Placeholder text.
description	string	—	Description below the label.
isLabelHidden	boolean	false	Hide the visual label. Keep the accessible name.
isDisabled	boolean	false	Prevent edits. Do not submit the form value.
disabledMessage	string	—	Reason for disabling. The disabled text area stays focusable when provided.
isReadOnly	boolean	false	Prevent edits. Include the value in form submission.
isRequired	boolean	false	Show a required description. Does not run native required validation.
isOptional	boolean	false	Show an optional description. Takes precedence over isRequired.
requiredLabel	string	Required	Required description text.
optionalLabel	string	Optional	Optional description text.
width	number | string	—	Width of the whole field. Numbers are treated as px.
htmlName	string	—	Native textarea name.
form	string	—	ID of the associated form.
status	FieldStatusInput	—	Error, warning, or success status.
statusVariant	'attached' | 'detached' | 'tooltip'	detached	How the status message is displayed. Text area defaults to below the control.
changeAction	(value: string, event) => void | Promise<void>	—	Action to run after content changes.
isLoading	boolean	false	Show a loading indicator.
hasClear	boolean	false	Show a clear button.
hasAutoFocus	boolean	false	Focus on mount.
clearLabel	string	—	Accessible label for the clear button.
loadingLabel	string	Loading	Accessible label for the loading indicator.
labelIcon	Component	—	Decorative icon before the label.
labelTooltip	string	—	Info tooltip beside the label.

Events

• update:modelValue(value)：update text content.
• change(value, event)：fired when content changes.
• clear(event)：fired when the clear button is clicked.
• enter(event)：fired on Enter. Shift + Enter does not fire it.
• keydown(event)：fired on any key press.
• actionError(error, value, event)：fired when changeAction throws.

When content changes, update:modelValue and change fire before changeAction. Cancelling the change event prevents changeAction from running.

Native attributes

• class, style, and other attributes are applied to the field wrapper.
• aria-labelledby and aria-describedby are merged into the native textarea.
• The component manages disabled, readonly, and aria-invalid.
• The icon slot shows a decorative icon on the left.
• The end slot shows extra content on the right.
• The labelIcon slot replaces the icon before the label.

Theming

.my-text-area {
  --astryx-text-area-min-height-md: 120px;
}

• --astryx-text-area-min-height-sm: minimum height for the sm size.
• --astryx-text-area-min-height-md: minimum height for the md size.
• --astryx-text-area-min-height-lg: minimum height for the lg size.

Other color and border variables are shared with TextInput. Neutral adapts to light and dark modes.