API reference
Headless textarea is primitive-first. Attach tngTextarea to a native <textarea>, use tngInputGroup for grouped composition, and style via slot/state attributes.
tngTextarea (directive)
Attach to a native textarea[tngTextarea]. The directive layers textarea-specific behavior on top of the shared input contract.
Directive attachment
html
<textarea tngTextarea rows="4"></textarea>
| Property | Type | Default | Details |
|---|---|---|---|
rows | number | 3 | Normalized to at least 1 and reflected to the native attribute. |
resize | 'vertical' | 'horizontal' | 'both' | 'none' | 'vertical' | Applied to style.resize and emitted as data-resize. |
ariaLabel, ariaLabelledby, ariaDescribedBy | string | null | null | Inherited from the shared input contract with whitespace normalization. |
disabled, readonly, required | boolean-like | false / null | Forwarded to the native textarea and mirrored as data attributes. |
tngInputGroup (primitive shell)
Wraps a projected tngTextarea with optional slots and provides the same leading, control, and trailing structure used by other headless field primitives.
Grouped review notes
A multiline field with a shared shell and a lightweight review-status chip.
Grouped review notes (Plain-CSS)
Grouped review notes (Tailwind CSS)
| Feature | Type | Details |
|---|---|---|
| Projected control contract | tngTextarea projection rule | Expects exactly one projected textarea control inside the group. |
| Structural layout | Built-in group behavior | Provides leading, flexible control, and trailing regions with mirrored state attrs. |
data-focused | State attribute | Applied on the group host while the textarea or any projected control is focused. |
data-invalid, data-disabled, data-readonly | Mirrored state attributes | Reflected from the projected textarea onto the group host for container styling. |
Slot directives
| Directive | Applies to | Adds | Details |
|---|---|---|---|
tngPrefix | Projected leading element | data-slot="input-leading" | Marks leading adornments such as icons or fixed labels. |
tngSuffix | Projected trailing element | data-slot="input-trailing" | Marks trailing status tokens, actions, or helper affordances. |