Choose a version:

TextArea

Captures longer text content from merchants with a multi-line, resizable text input area.

Anchor to propertiesProperties

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.

Was this section helpful?

Anchor to slotsSlots

Learn more about using slots

Anchor to accessory accessory HTMLElement: Additional content to be displayed in the field. Commonly used to display clickable text.

Was this section helpful?

Anchor to eventsEvents

Learn more about registering 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.

CallbackEvent

bubbles
```
boolean
```
cancelable
```
boolean
```
composed
```
boolean
```
currentTarget
```
HTMLElementTagNameMap[T]
```
detail
```
any
```
eventPhase
```
number
```
target
```
HTMLElementTagNameMap[T] | null
```

interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}

Was this section helpful?

Code

<s-text-area

label="Shipping address"

value="1776 Barnes Street, Orlando, FL 32801"

Preview

Anchor to examplesExamples

TextArea usage patterns

Anchor to example-rows-configurationRows configuration

Configure visible rows and character limits

Anchor to example-event-handlingEvent handling

Handle text area events

Anchor to example-accessory-slotAccessory slot

Add action buttons using the accessory slot. Only s-button and s-clickable are supported

Was this section helpful?

Rows configuration

<s-text-area

label="Order notes"

placeholder="Add special instructions..."

rows={5}

maxLength={500}

onInput={(event) => console.log('Characters:', event.target.value.length)}

Examples

Rows configuration

Description

Configure visible rows and character limits

Default

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

Event handling

Description

Handle text area events

Default

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

Accessory slot

Description

Add action buttons using the accessory slot. Only s-button and s-clickable are supported

Default

<s-text-area
  label="Product description"
  placeholder="Enter product details..."
  value="This is a sample product description"
>
  <s-button slot="accessory" onClick={() => console.log('Clear')}>
    Clear
  </s-button>
</s-text-area>;