Label

The ownable Label install gives your app a local wrapper for control association, required emphasis, and label typography while keeping TailNG’s form semantics close to the product.

Why own Label locally

Labels often become product-specific once teams add helper badges, inline metadata, required phrasing, or editorial tone changes. Local ownership makes those changes easy to ship without waiting on a shared package release.

Adjust label copy, required treatment, and spacing next to the fields that use them.
Keep control association patterns close to the app code that owns the form UX.
Extend label markup locally when product fields need more than a single text node.

What the install includes

The registry-backed label install writes the local wrapper, template, styles, and export barrel under your app so label decisions can evolve alongside the surrounding form patterns.

Ownable Install

Install Label from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add label

npx tailng add label

Generated files

The command scaffolds local files under src/app/tailng-ui/label.

src/app/tailng-ui/label/tng-label-primitive.ts
src/app/tailng-ui/label/tng-label.ts
src/app/tailng-ui/label/tng-label.html
src/app/tailng-ui/label/tng-label.css
src/app/tailng-ui/label/index.ts

Import in your feature module/component

import { TngLabel, TngLabelPrimitive } from './tailng-ui/label';

Usage

<tng-label forId="workspace-name" [required]="true">
  Workspace name
</tng-label>
<input id="workspace-name" type="text" required />