Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

Styling contract

Headless textarea styling is slot/state driven. You style the grouped shell and the native multiline control using the same contract as other headless field primitives, with one extra hook for resize mode.

CSS contracts

These selectors are the stable styling surface for tngTextarea and tngInputGroup.

Public selectors

css
[data-slot="input-group"]
[data-slot="input"]
[data-slot="input-leading"]
[data-slot="input-trailing"]
[data-focused]
[data-invalid]
[data-disabled]
[data-readonly]
[data-resize="vertical" | "horizontal" | "both" | "none"]

State hooks

css
.support-reply-shell[data-slot="input-group"] {
  align-items: flex-start;
  background: var(--tng-semantic-background-base, #ffffff);
  border: 1px solid var(--tng-semantic-border-strong, #94a3b8);
  border-radius: 0.85rem;
  min-height: 8rem;
  padding: 0.7rem 0.85rem;
}

.support-reply-shell[data-slot="input-group"][data-focused] {
  border-color: var(--tng-semantic-accent-brand, #2563eb);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--tng-semantic-accent-brand, #2563eb) 18%, transparent);
}

.support-reply-shell [data-slot="input"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--tng-semantic-foreground-primary, #0f172a);
  inline-size: 100%;
  min-height: 6.5rem;
  min-inline-size: 0;
  outline: none;
  padding: 0;
  resize: vertical;
}

.support-reply-shell [data-slot="input"]:focus,
.support-reply-shell [data-slot="input"]:focus-visible {
  box-shadow: none;
  outline: none;
}

User scenario style examples

A support reply field with multiline editing space and a lightweight status chip.

Support reply textarea (Plain-CSS)

Different styling pattern examples

Resize policy and state treatment are the two main textarea-specific extensions.

Resize mode styling

css
[data-slot="input"][data-resize="none"] {
  resize: none;
}

[data-slot="input"][data-resize="both"] {
  resize: both;
}

State-driven styling

css
[data-slot="input-group"][data-invalid] {
  border-color: var(--tng-semantic-accent-danger);
}

[data-slot="input-group"][data-disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}