Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

API reference

The component-side textarea contract has two layers: the headless textarea[tngTextarea] primitive and the self-rendering <tng-textarea> wrapper.

Primitive: textarea[tngTextarea]

Use the directive when you want a real native textarea plus TailNG’s normalized rows, resize, and shared input-state contract.

InputTypeDefaultNotes
rowsnumber3Normalized to a minimum of 1.
resize'vertical' | 'horizontal' | 'both' | 'none''vertical'Applied to both style.resize and data-resize.
ariaLabel, ariaLabelledby, ariaDescribedBystring | nullnullInherited from the shared input contract with whitespace normalization.
ariaInvalid, ariaRequiredboolean | nullnullARIA pass-through follows nullable coercion rules.
disabled, readonly, requiredboolean-likefalse / nullForwarded to the native textarea through the shared input directive.
data-slot="input", data-resizeoutput attributes—Stable styling hooks emitted on the native textarea element.

Component: <tng-textarea>

Renders an internal native <textarea> that already uses the shared input contract. Use it when you want the default TailNG textarea shell and a controlled-value API.

Input / OutputTypeDefaultNotes
valuestring | nullnullControlled value for the inner native textarea.
valueChangeoutput<string>—Emits on input events when the value changes.
id, name, placeholderstring | nullnullForwarded to the internal native textarea.
ariaLabel, ariaLabelledby, ariaDescribedBystring | nullnullAccessible naming and description inputs passed through to the internal control.
ariaInvalid, ariaRequiredboolean | nullnullForwarded to the internal tngInput primitive.
disabled, readonly, requiredboolean-likefalseMaps directly to the internal native textarea state.
rowsnumber3Normalized to at least 1 before it reaches the internal control.
resize'vertical' | 'horizontal' | 'both' | 'none''vertical'Applied to the internal control style and mirrored as data-resize.

Composition note

tngTextarea composes the shared tngInput behavior internally. That means the textarea-specific primitive owns rows and resize, while accessible naming and state attributes still follow the shared input rules.