Text Area

A Text Area is an input component used for capturing longer, multi-line text. Unlike a standard input field, it expands vertically to accommodate more content, making it ideal for comments, messages, descriptions, or feedback.

Use a Text Area when users need to provide detailed or multi-line input, rather than short labels or single words.

Common alternative names:
Multi-line Input, Text Field (Multi-line), Input Box

---

Variants

Basic

A simple text area with placeholder text that expands as the user types.

Preview

Code

const InputField(
  minLines: 3,
  maxLines: 6,
  hintText: 'Write a note',
  textInputType: TextInputType.multiline,
)

---

Disabled

Text area in a non-interactive state, preventing user input.

Preview

Code

const InputField(
  minLines: 3,
  maxLines: 6,
  hintText: 'Write a note',
  textInputType: TextInputType.multiline,
  enabled: false,
)

---

With Validator

Text area with validation that displays error messages when content is invalid.

Preview

Code

InputField(
  minLines: 3,
  maxLines: 6,
  hintText: 'Press enter to validate',
  textInputType: TextInputType.multiline,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Note cannot be empty';
    }
    return null;
  },
)

---

Properties

Property	Type	Description
controller	TextEditingController?	Controller for the text area input.
minLines	int?	Minimum number of lines to display. Determines the initial height of the text area.
maxLines	int?	Maximum number of lines to display. The text area will expand up to this limit.
hintText	String?	Placeholder text displayed when the text area is empty.
hintStyle	TextStyle?	Style for the hint text when the text area is empty.
textInputType	TextInputType?	Set to TextInputType.multiline for text area functionality.
validator	String? Function(String?)?	Function that validates the text and returns an error message string if invalid.
enabled	bool?	Controls whether the text area is interactive or grayed out.
maxLength	int?	Maximum number of characters allowed in the text area.
autovalidateMode	AutovalidateMode?	Determines when validation should be performed (e.g., on user interaction, always).
contentPadding	EdgeInsetsGeometry?	Custom padding for the content inside the text area.
fillColor	Color?	Background color of the text area.
border	BoxBorder?	Custom border for the text area. Overrides the default border.
borderRadius	BorderRadiusGeometry	Corner radius for the text area borders.
initialValue	String?	Default text to display when the text area is first created.
onChanged	void Function(String)?	Callback function when the text value changes.
focusNode	FocusNode?	Focus node that controls the focus state of this text area.
autofocus	bool	When true, the text area will be focused when the widget is first created.
textInputAction	TextInputAction?	Determines the action button on the keyboard (e.g., newline, done).
onSubmitied	ValueChanged<String>?	Callback function when the user submits the text area.

---

Usage Tips

• Set minLines to define the initial height of the text area
• Use maxLines to prevent the text area from growing too large
• Always set textInputType: TextInputType.multiline for proper multiline behavior
• Consider adding validation for required fields or content length limits
• Use appropriate textInputAction values like TextInputAction.newline for multiline input