# Spectrum Web Components Text Area Not Working

**URL:** <https://forums.creativeclouddeveloper.com/t/spectrum-web-components-text-area-not-working/11665>\
**Category:** Premiere Pro\
**Created:** [January 22, 2026, 4:35am UTC](https://forums.creativeclouddeveloper.com/t/spectrum-web-components-text-area-not-working/11665 "2026-01-22T04:35:02Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![lachlanda](https://avatars.discourse-cdn.com/v4/letter/l/d78d45/32.png) [@lachlanda](https://forums.creativeclouddeveloper.com/u/lachlanda)\
**Post date:** [January 22, 2026, 4:35am UTC](https://forums.creativeclouddeveloper.com/t/spectrum-web-components-text-area-not-working/11665/1 "2026-01-22T04:35:02Z")

</div>

I cannot for the life of me get a resizable text area to work with Spectrum Web Components and UXP for Premiere Pro.

The example on this page shows a text box that can be resized with a handle in the bottom right hand corner, as well as scroll bars: [Textarea: Spectrum Web Components](https://opensource.adobe.com/spectrum-web-components/components/textarea/#anatomy)

I have tried to implement that as follows:

```auto
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

body {

margin: 16px;

font-family: adobe-clean, sans-serif;

color: white;

    }

sp-theme {

display: block;

    }

sp-field-label {

color: white !important;

    }

sp-help-text {

color: white !important;

    }

sp-textfield {

width: 100%;

    }

</style>

</head>

<body>

<sp-theme theme="spectrum" color="dark" scale="medium">

<h2>Resizable Textarea Test</h2>

<!-- Resizable Textarea -->

<sp-field-label for="story-0">Background</sp-field-label>

<sp-textfield

id="story-0"

multiline

rows="5"

placeholder="Enter your life story - drag bottom-right corner to resize">

<sp-help-text slot="help-text">Press Enter for new lines. Drag corner to resize.</sp-help-text>

</sp-textfield>

</sp-theme>

<script type="module">

// Import Spectrum Web Components

import '@spectrum-web-components/theme/sp-theme.js';

import '@spectrum-web-components/theme/src/themes.js';

import '@spectrum-web-components/textfield/sp-textfield.js';

import '@spectrum-web-components/field-label/sp-field-label.js';

import '@spectrum-web-components/help-text/sp-help-text.js';

// Wait for components to be defined

await Promise.all([

customElements.whenDefined('sp-theme'),

customElements.whenDefined('sp-textfield'),

customElements.whenDefined('sp-field-label'),

customElements.whenDefined('sp-help-text')

    ]);

console.log('All Spectrum components loaded');

const storyField = document.getElementById('story-0');

storyField.addEventListener('input', (e) => {

console.log('Value changed:', e.target.value);

    });

// Check if multiline is working

console.log('Multiline attribute:', storyField.hasAttribute('multiline'));

console.log('Rows:', storyField.getAttribute('rows'));

</script>

</body>

</html>

```

But it just appears as a single line text field with no multiline functionality

 ![Screenshot 2026-01-22 at 3.28.10 pm](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/0/076302d7b440418d4658862e2a65bc2c04dcab71.jpeg)

Looking at it it doesn’t look like the labels are working properly either.

I have used npm install to make sure the dependencies are there, see image: [Imgur: The magic of the Internet](https://imgur.com/a/XW2K1BI)

I have been at this for several days and can’t seem to figure this out. I would love some help on figuring out how to get SWC to work.

---

<div class="post-metadata">

**Author:** ![ariestav](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/ariestav/32/4531_2.png) [@ariestav](https://forums.creativeclouddeveloper.com/u/ariestav)\
**Post date:** [January 22, 2026, 6:52pm UTC](https://forums.creativeclouddeveloper.com/t/spectrum-web-components-text-area-not-working/11665/2 "2026-01-22T18:52:32Z")

</div>

@lachlanda It won’t work. `<textarea>` element is hobbled in UXP — why? I have no idea. I asked a similar question about getting the scrollbar to function when the height remains static. Adobe wants `<textarea>` to be limited in scope so that UI designers conform to the Spectrum design system. Personally, I think it’s a major limitation as text prompts are becoming the norm. Alot of text prompts are very long, and I’m not sure why they would limit the usability of the `<textarea>`. I would argue that it’s probably one of the most important user input elements today! Sorry I don’t have a better answer.

The documentation you linked to is for Web Components, not for UXP extension / plugins. So it likely works in the browser, but not in a loaded extension that uses a manifest to load into the host application.

Here is a previous thread on the matter: [Textarea scroll bar](https://forums.creativeclouddeveloper.com/t/textarea-scroll-bar/9092)
