Collects multi-line text with labels, hints, errors, and character counting.
Collects multi-line text with labels, hints, errors, and character counting.
import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";
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>
| 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. |
| Event | Type | Description |
|---|---|---|
input
|
InputEvent
|
Emitted while the text value changes. |
change
|
Event
|
Emitted after the text value is committed. |
| Name | Description |
|---|---|
textarea
|
The native text area. |
character-count
|
The character counter. |
The component emits standard input and change events.