Edit in GitHubLog an issue

sp-textarea

Since: UXP 4.1, PS 22.0.0

Renders a text area with optional associated label.

Text areas

See:

Example

Copied to your clipboard
1<sp-textarea placeholder="Enter your name">
2 <sp-label slot="label">Name</sp-label>
3</sp-textarea>

Variants and states#

There are several different variants for text areas.

Disabled#

Indicates that the text area is disabled.

Copied to your clipboard
<sp-textarea disabled placeholder="Enter your name"></sp-textarea>

Valid#

Indicates that the value of the text area is valid.

Copied to your clipboard
<sp-textarea valid placeholder="Enter your name"></sp-textarea>

Invalid#

Indicates that the value of the text area is invalid.

Copied to your clipboard
<sp-textarea invalid placeholder="Enter your name"></sp-textarea>

Quiet#

Styles the text area in a quieter, simpler appearance.

Copied to your clipboard
<sp-textarea quiet placeholder="Enter your name"></sp-textarea>

Responding to events#

You can respond to changes on the text area using the change and input events.

Copied to your clipboard
1document.querySelector(".yourTextArea").addEventListener("input", evt => {
2 console.log(`New value: ${evt.target.value}`);
3})
Copyright © 2021 Adobe. All rights reserved.