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

<tng-label> is a styled wrapper around the tngLabel primitive. Most component consumers work with the wrapper, but it helps to understand what the primitive forwards.

Primitive: label[tngLabel]

Primitive attachment

html
<label tngLabel for="release-owner">Release owner</label>
InputTypeDefaultNotes
disabledbooleanfalseAdds data-disabled for reduced-emphasis label styling.
requiredbooleanfalseAdds data-required; keep required semantics on the control itself.

Component: <tng-label>

Component attachment

html
<tng-label forId="release-owner" [required]="true">Release owner</tng-label>
<input id="release-owner" aria-required="true" />
InputTypeDefaultNotes
forIdstring''Maps to native for when the trimmed value is non-empty.
requiredbooleanfalseShows the built-in asterisk and forwards data-required.
disabledbooleanfalseForwards data-disabled to the internal label for muted styling.

State attributes

  • data-slot="label" is always emitted on the internal label element.
  • data-required appears when the label should render required emphasis.
  • data-disabled appears when the label should render reduced emphasis.
  • The component does not disable or require the control for you; apply those semantics to the actual input, checkbox, radio, or textarea.