TailNG — Angular UI with Tailwind

Overview

tng-text-input is a standalone input component that implements ControlValueAccessor for Angular forms. It supports prefix/suffix projection, IME-safe typing, and Tailng’s slot-based theming.

CVA

IME safe

Prefix/Suffix

Slot hooks

Standalone

Reactive Forms

Quick example

Basic

HTML

CSS


<form [formGroup]="login">
  <tng-text-input
    formControlName="userName"
    placeholder="Enter username"
    [slot]="customSlot"
  />
</form>


import { Component } from '@angular/core';
import {FormControl,FormGroup,ReactiveFormsModule} from '@angular/forms';
import { TngTextInput, TngSlotMap, TngTextInputSlot } from '@tailng-ui/ui/form';
@Component({
  selector: 'text-input-demo',
  standalone: true,
  imports: [ReactiveFormsModule, TngTextInput],
  templateUrl: './text-input.component.html',
})
export class TextInputDemoComponent {
  login = new FormGroup({
    userName: new FormControl('', { nonNullable: true })
});

  readonly customSlot: TngSlotMap<TngTextInputSlot> = {
    frame: ['border-2', 'border-blue-900', 'rounded-md', 'shadow-md', 'focus-within:ring-blue-900'],
  };


rootClass = flex h-10 w-full items-center rounded-md 
            border border-border bg-bg text-foreground
            focus-within:border-transparent 
            focus-within:ring-2 focus-within:ring-primary 
            focus-within:ring-offset-1 
            focus-within:ring-offset-background

Works with formControlName and template-driven forms.

Search with prefix

HTML

CSS


<form [formGroup]="form">
  <tng-text-input placeholder="Search..."
    formControlName="search"
    [slot]="searchSlot"
  >
    <tng-icon
      tngPrefix
      name="bootstrapSearch"
      class="ml-3 text-muted"
    />
  </tng-text-input>
</form>


import { Component } from '@angular/core';
import {FormControl,FormGroup,ReactiveFormsModule} from '@angular/forms';
import { TngIcon } from '@tailng-ui/icons/icon';
import { TngTextInput, TngSlotMap, TngTextInputSlot } from '@tailng-ui/ui/form';
@Component({
  selector: 'text-input-demo',
  standalone: true,
  imports: [ReactiveFormsModule, TngTextInput,TngIcon],
  templateUrl: './text-input.component.html',
})
export class TextInputDemoComponent {
  form = new FormGroup({
    search: new FormControl('', { nonNullable: true })
});

  readonly searchSlot: TngSlotMap<TngTextInputSlot> = {
    input: ['text-blue-700'],
  };


// Default slot values
frame = flex h-10 w-full items-center rounded-md border border-border bg-bg text-foreground
        focus-within:border-transparent focus-within:ring-2 focus-within:ring-primary
        focus-within:ring-offset-1 focus-within:ring-offset-background
input = h-full min-w-0 flex-1 bg-transparent px-3 text-sm outline-none placeholder:text-muted
tngPrefix = ml-3

Use [tngPrefix] and [tngSuffix] for icons/actions.

Features

IME-safe input

Handles composition events correctly for languages like Japanese, Chinese, and Korean.

Prefix / Suffix slots

Project icons or actions before/after the input using tngPrefix / tngSuffix.

Slot-based micro styling

Customize styling via the slot input with keys: frame, input, prefix, suffix.

Forms-ready

Full ControlValueAccessor integration for reactive and template-driven forms.

Tip: keep projected icon spacing inside the projected elements (e.g. ml-3 / mr-3) for consistent alignment.