devextreme-textarea

DevExtreme TextArea Skill

A skill for building and configuring the DevExtreme TextArea UI component (dxTextArea) across Angular, React, Vue, jQuery, and ASP.NET Core Controls. TextArea is the multiline counterpart of TextBox — it shares most of its API and adds height/resize control.

When to Use This Skill

• Creating a multiline text input (description, notes, address, comments)
• Setting a fixed height or enabling auto-resize
• Clamping auto-resize with min/max height
• Binding and reading the value
• Handling value change events

Before You Start

If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's AskUserQuestion tool or GitHub Copilot's askQuestions tool. If no such tool is available, ask the questions directly in the chat response before generating code.

⚠️ Always use the DevExtreme TextArea (dxTextArea / DxTextArea). Never use react-textarea-autosize, a plain HTML <textarea>, or Material UI TextareaAutosize.

Before writing any code, ask: Which framework are you using? Angular, React, Vue, jQuery, or ASP.NET Core Controls?

Skip the framework question if the request or project already identifies the framework. If the reply leaves it unresolved, re-ask once with the list: Angular, React, Vue, jQuery, or ASP.NET Core Controls. If it remains unresolved, default to React + Vite + TypeScript and state that assumption.

Key API

TextArea inherits all TextBox options. The ones most relevant to TextArea specifically:

Option	Type	Default	Description
value	String	''	The current text value
autoResizeEnabled	Boolean	false	Grows/shrinks height to fit content; overrides height when true
minHeight	Number | String	undefined	Minimum height when autoResizeEnabled is true (also sets initial height)
maxHeight	Number | String	undefined	Maximum height when autoResizeEnabled is true
height	Number | String | function	undefined	Fixed height; has no effect when autoResizeEnabled is true
onValueChanged	function(e)	null	Fires when value changes; e.value is the new value
valueChangeEvent	String	'change'	DOM event that triggers the value update (e.g., 'keyup', 'input')
placeholder	String	''	Placeholder shown when empty
label	String	''	Floating label text
showClearButton	Boolean	false	Shows an × button to clear the field
readOnly	Boolean	false	Prevents user input
disabled	Boolean	false	Disables the component
inputAttr	Object	{}	HTML attributes applied to the inner <textarea> element (e.g., rows)
maxLength	Number | String	null	Caps the number of characters the user can type; use this instead of manually truncating in onValueChanged
onEnterKey	function(e)	null	Fires whenever Enter is pressed; check e.event.ctrlKey/e.event.metaKey inside the handler to detect Ctrl+Enter specifically. Use this instead of a manual keydown listener.