@kit-ng-ui/input

Text input components for Kit UI. Mirrors ant-design's Input family on Angular standalone + signals: KitInput, KitTextarea, KitPassword, KitSearch.

Install

pnpm add @kit-ng-ui/input @kit-ng-ui/core @kit-ng-ui/icons

Styles

// app styles.scss
@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/input/styles' as input;

Use

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import {
  KitInputComponent,
  KitTextareaComponent,
  KitPasswordComponent,
  KitSearchComponent,
} from '@kit-ng-ui/input';

@Component({
  standalone: true,
  imports: [
    KitInputComponent,
    KitTextareaComponent,
    KitPasswordComponent,
    KitSearchComponent,
    ReactiveFormsModule,
  ],
  template: `
    <kit-input placeholder="Username" [formControl]="name" />
    <kit-input prefixIcon="user" placeholder="With prefix" />
    <kit-input addonBefore="https://" addonAfter=".com" placeholder="Domain" />
    <kit-input [allowClear]="true" [showCount]="true" [maxLength]="20" />

    <kit-textarea placeholder="Description" [autoSize]="{ minRows: 2, maxRows: 6 }" />

    <kit-password placeholder="Password" />

    <kit-search enterButton="Search" (search)="onSearch($event)" />
  `,
})
export class InputDemo {
  name = new FormControl('');
  onSearch(value: string) { console.log(value); }
}

API

<kit-input>

| Input | Type | Default | | ------------------ | ----------------------------------------------------------- | ------------ | | size | 'sm' \| 'md' \| 'lg' | 'md' | | variant | 'outlined' \| 'filled' \| 'borderless' \| 'underlined' | 'outlined' | | status | 'default' \| 'error' \| 'warning' | 'default' | | disabled | boolean | false | | readonly | boolean | false | | type | string (native input type) | 'text' | | placeholder | string \| null | null | | maxLength | number \| null | null | | showCount | boolean | false | | allowClear | boolean | false | | block | boolean | false | | prefix | string \| null — leading text | null | | prefixIcon | string \| null — icon name | null | | suffix | string \| null — trailing text | null | | suffixIcon | string \| null — icon name | null | | addonBefore | string \| null | null | | addonAfter | string \| null | null |

Outputs: (valueChange), (inputEvent), (changeEvent), (focusEvent), (blurEvent), (pressEnter), (clear).

Implements ControlValueAccessor — works with template-driven (ngModel) and reactive (formControl) forms.

<kit-textarea>

Same shared inputs plus [rows], [cols], and [autoSize]:

autoSize: { minRows?: number; maxRows?: number } | boolean | null

<kit-password>

Same shared inputs plus [visibilityToggle] (default true) to render the show/hide eye button.

<kit-search>

Same shared inputs plus:

| Input | Type | Default | | ------------- | ------------------- | ------- | | enterButton | boolean \| string | false | | loading | boolean | false |

enterButton = true renders an icon-only search trigger inside the input. Pass a string to render a separate, labelled trigger button fused to the trailing edge. Emits (search) with the current value on Enter or trigger click.

Behavior notes

• All four components implement ControlValueAccessor. They forward aria-invalid, aria-describedby, and aria-required so they integrate cleanly with the future @kit-ng-ui/form FormItem.
• Focus state is reflected on the wrapper element with kit-input--focused. The wrapper, not the native control, owns the focus ring so prefix / suffix / addons stay inside it.
• allowClear is shown only when the input is editable and the value is non-empty. The click handler uses mousedown so it fires before the input loses focus.
• Textarea autoSize recomputes height on every value change. Set maxRows to clamp tall inputs; overflow becomes scrollable once it exceeds maxRows.
• Search emits (search) on Enter as well as button click. Native form submission is suppressed via preventDefault.