Textarea
A native web component for multiline text input (`<pura-textarea>`), with an optional label, hint text, and disabled/invalid states. Use it in forms to collect long text such as comments, descriptions, or notes. The value is accessible through the `value` property, and the `value` attribute is updated on every keystroke.
Preview
<pura-textarea
label="Comment"
placeholder="Write your comment..."
hint="Maximum of 500 characters."
rows="5"
></pura-textarea>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text shown above the field. |
hint | string | — | Hint text shown below the field. |
placeholder | string | — | Text shown when the field is empty. |
rows | number | 4 | Number of visible rows in the field. |
value | string | — | Current content of the field; also available as a property. |
disabled | boolean | false | Disables the field for editing. |
invalid | boolean | false | Applies the error style to the field and the hint. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/textarea.js"></script>import "./pura/lib/textarea.js";