Choose a version:

TextArea

Use s-text-area to capture multi-line text input from users. Provides a resizable text input area for longer content like descriptions or comments.

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 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

Anchor to accessory accessory HTMLElement

Was this section helpful?

Anchor to eventsEvents

Anchor to blur blur (event: <"s-divider">) => void
Anchor to change change (event: <"s-divider">) => void
Anchor to focus focus (event: <"s-divider">) => void
Anchor to input input (event: <"s-divider">) => void

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="Add note" placeholder="Enter a custom note" value="Custom note" ></s-text-area>

TextArea

Anchor to propertiesProperties

Anchor to slotsSlots

Anchor to eventsEvents

CallbackEvent

Code

Examples

Code

Default

Preview