noora/docs/components/textarea.md
Collects multi-line text with labels, hints, errors, and character counting.
<noora-text-area label="Description" name="description"></noora-text-area>
| Attribute | Type or allowed values | Default | Description |
|---|---|---|---|
label | string | None | Sets the field label. |
sublabel | string | None | Sets secondary label text. |
hint | string | None | Sets supporting text. |
hint-variant | default, destructive, disabled | "default" | Controls hint semantics. |
error | string | None | Sets the validation error. |
name | string | "" | Sets the submitted field name. |
value | string | "" | Gets or sets the field value. |
placeholder | string | None | Sets placeholder text. |
required | boolean | false | Marks the field as required. |
show-required | boolean | false | Shows the required indicator. |
rows | number | 4 | Sets the visible row count. |
max-length | number | 200 | Sets the maximum character count. |
show-character-count | boolean | true | Shows the current character count. |
resize | none, both, horizontal, vertical | "vertical" | Controls native resizing. |
disabled | boolean | false | Disables the field. |
| Property | Type | Description |
|---|---|---|
control | HTMLTextAreaElement | null | The native text area. |
form | HTMLFormElement | null | The associated form. |
| Event | Type | Description |
|---|---|---|
input | InputEvent | Emitted while the text value changes. |
change | Event | Emitted after the text value is committed. |
| Part | Description |
|---|---|
textarea | The native text area. |
character-count | The character counter. |
The component emits standard input and change events.
Collect longer supporting text.
<noora-text-area name="basic" placeholder="Enter your message..." max-length="200"></noora-text-area>
Mark required fields visibly and semantically.
<noora-text-area name="required" label="Message" placeholder="This field is required" required show-required></noora-text-area>
Give supporting guidance below the field.
<noora-text-area name="feedback" label="Feedback" placeholder="Share your feedback..." hint="Please be as detailed as possible"></noora-text-area>
Communicate validation failures.
<noora-text-area name="error" label="Message" placeholder="Enter your message..." error="This field is required"></noora-text-area>
Prevent editing while preserving context.
<noora-text-area name="disabled" label="Disabled" placeholder="Enter your message..." disabled></noora-text-area>