Skip to main content

TextArea

The TextArea component captures multi-line text input. Use it to collect descriptions, notes, comments, or other extended text content.

The component supports configurable height, character limits, and validation. For single-line text input, use TextField.

Support
Targets (10)

Supported targets

Use cases

  • Descriptions: Collect product descriptions or notes in inventory management workflows.
  • Customer notes: Capture comments, special instructions, or notes in order processing.
  • Feedback: Enable feedback collection or issue reporting with detailed explanations.
  • Multi-line entry: Support multi-line text for addresses, delivery instructions, or requirements.

Anchor to examplesExamples

Anchor to example-capture-multi-line-text-with-a-text-areaCapture multi-line text with a text area

Capture multi-line text input using a TextArea component. This example shows a basic text area with a label for extended content.

Capture multi-line text with a text area

Capture multi-line text with a text area

<s-text-area
label="Shipping address"
value="1776 Barnes Street, Orlando, FL 32801"
/>

Anchor to example-configure-rows-and-character-limitsConfigure rows and character limits

Configure the number of visible rows and character limits to control text area size and input length. This example shows how to use the rows property to set initial height and maxlength to limit content, ensuring appropriate sizing for different types of text input.

Configure rows and character limits

<s-text-area
label="Order notes"
placeholder="Add special instructions..."
rows={5}
maxLength={500}
onInput={(event) => console.log('Characters:', event.currentTarget.value.length)}
/>

Anchor to example-handle-text-input-eventsHandle text input events

Subscribe to text area events to respond when merchants enter or modify text. This example demonstrates handling onChange, onInput, onFocus, and onBlur events for autosave functionality, character counting, or real-time validation of longer text content.

Handle text input events

<s-text-area
label="Customer feedback"
placeholder="Enter feedback..."
onInput={(event) => console.log('Input:', event.currentTarget.value)}
onChange={(event) => console.log('Change:', event.currentTarget.value)}
onFocus={(event) => console.log('Focused')}
onBlur={(event) => console.log('Blurred')}
/>

Anchor to propertiesProperties

Configure the following properties on the TextArea component.

Anchor to details
details
string

Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.

This will also be exposed to screen reader users.

Anchor to disabled
disabled
boolean
Default: false

Disables the field, disallowing any interaction.

Anchor to error
error
string

Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.

Anchor to id
id
string

A unique identifier for the element.

Anchor to label
label
string

Content to use as the field label.

Anchor to maxLength
maxLength
number
Default: Infinity

Specifies the maximum number of characters allowed.

Anchor to placeholder
placeholder
string

A short hint that describes the expected value of the field.

Anchor to required
required
boolean
Default: false

Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the error property.

Anchor to rows
rows
number
Default: 2

A number of visible text lines.

Anchor to value
value
string

The current value for the field. If omitted, the field will be empty.

Anchor to eventsEvents

The TextArea component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to blur
blur
(event: <"s-text-area">) => void

Callback when the element loses focus.

Anchor to change
change
(event: <"s-text-area">) => void

Callback after editing completes (typically on blur).

Anchor to focus
focus
(event: <"s-text-area">) => void

Callback when the element receives focus.

Anchor to input
input
(event: <"s-text-area">) => void

Callback when the user makes any changes in the field.

Anchor to best-practicesBest practices

  • Set appropriate row count: Use 2-3 rows for brief notes, 4-6 for descriptions, and more for extensive content.
  • Show character limit feedback: When approaching maxLength, display remaining characters in the details text.
  • Write descriptive labels: Use specific labels like "Product Description" or "Special Instructions" rather than generic terms.
Was this page helpful?