Input

The ownable Input install gives your app a local wrapper and primitive bridge you can edit directly while keeping the TailNG interaction contract intact.

Why own Input locally

Input is usually one of the first components product teams need to bend to their own design system. Local ownership makes it easier to tune markup, defaults, and validation presentation without forking the wider component package.

Change wrapper structure or styling without waiting for a package release.
Review input-specific behavior inside the application repo.
Keep local form conventions close to the product code that uses them.

What the install includes

The registry-backed input install writes the local component wrapper, template, styles, and export barrel under your app so the generated files can be versioned alongside the rest of the product.

Ownable Install

Install Input 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 input

npx tailng add input

Generated files

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

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

Import in your feature module/component

import { TngInput, TngInputPrimitive } from './tailng-ui/input';

Usage

<tng-input
  type="email"
  placeholder="name@company.com"
  [ariaLabel]="'Email address'"
></tng-input>