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 klass-based theming.
Quick example
Basic
<form [formGroup]="login">
<tng-text-input
formControlName="userName"
placeholder="Enter username"
frameKlass="border-2 border-blue-900 rounded-md shadow-md focus-within:ring-blue-900"
/>
</form>
import { Component } from '@angular/core';
import {FormControl,FormGroup,ReactiveFormsModule} from '@angular/forms';
import { TngTextInput } 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 })
});
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
<form [formGroup]="form">
<tng-text-input placeholder="Search..."
formControlName="search"
inputKlass="text-blue-700"
>
<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 } 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 })
});
inputKlass = 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.
Klass theming
Customize shell and slots via frameKlass, inputKlass, prefixKlass, suffixKlass.
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.