Component API
<text-area>
Plain multi-line text field — a thin, tokenized wrapper around a native<textarea>, styled to match the other value-entry form fields
(autocomplete-input, form-select, ...). Not a rich editor; use readonly
to display pre-formatted text (e.g. an error message) that the user can
still select and copy, typically paired with <copy-link-button>.
Supports form-field's opt-in floating-label mode when slotted inside it.
Install
import "@f-ewald/components/text-area.js";Usage
<form-field floating-label label="Description">
<text-area placeholder="Describe the issue…" rows="4"></text-area>
</form-field>
<text-area readonly value="Error code: 429 - No deployments available for selected model."></text-area>Attributes / properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | string | "" | Current text content. |
rows | rows | number | 4 | Visible row count (native <textarea rows>). |
placeholder | placeholder | string | "" | Placeholder text shown when empty. |
readonly | readonly | boolean | false | When true, the value can be selected/copied but not edited. |
disabled | disabled | boolean | false | Disables the field entirely (no interaction, dimmed). |
Events
| Event | Description |
|---|---|
input | Fires on every keystroke; detail: { value: string }. |
change | Native change semantics (on blur, if the value changed); detail: { value: string }. |
Slots
None.
CSS custom properties
| Custom property |
|---|
--ui-border |
--ui-border-width |
--ui-danger |
--ui-focus-ring |
--ui-font |
--ui-font-size |
--ui-font-size-sm |
--ui-font-size-xs |
--ui-font-weight-regular |
--ui-line-height-normal |
--ui-line-height-tight |
--ui-primary |
--ui-radius-sm |
--ui-surface |
--ui-surface-muted |
--ui-text |
--ui-text-muted |