<link rel="stylesheet" href="https://esm.sh/@erikt/ui/textarea.css" />Default
<textarea placeholder="Write something..."></textarea>Composition
A <textarea> sits flush inside an
<article class="card"> with a toolbar header and status
footer.
<article class="card" data-focus-within>
<header style="display: flex; align-items: center; gap: 8px">
<svg><!-- brand-javascript --></svg>
<span>script.js</span>
<span style="flex: 1"></span>
<button class="ghost square" aria-label="Reload" data-tooltip>
<svg>...</svg>
</button>
<button class="ghost square" aria-label="Copy" data-tooltip>
<svg>...</svg>
</button>
</header>
<textarea data-focus style="border-radius: 0; resize: none; box-shadow: none">
console.log('Hello, world!');
</textarea>
<footer
style="display: flex; align-items: center; justify-content: space-between"
>
<small>Line 1, Column 1</small>
<button>
Run <svg><!-- corner-down-left --></svg>
</button>
</footer>
</article>API reference
| Type | Classes / attributes | What it does |
|---|---|---|
| Rows | [rows="4"] |
Fixed height instead of growing with the content |