Input

Input is the ngsInput directive for native input and textarea elements. It connects standard text controls to NgStarter FormField styling, floating label state, required and disabled state, readonly state, placeholders, focus behavior, and Angular form error state.

Use it for regular text entry such as search, email, password, URL, plain phone-like text, textarea comments in forms, filters, settings forms, profile forms, and admin forms. In most cases, place one input[ngsInput] or textarea[ngsInput] inside one ngs-form-field with ngs-label, hints, errors, and optional prefixes or suffixes.

Do not use Input for numeric controls with step/min/max behavior, phone country selection, custom masks, selects, autocomplete, date/time pickers, currency or country selection, inline rename, comments/replies, rich text, block content, checkbox, radio, toggles, buttons, or layout wrappers. Use the dedicated NgStarter control for those cases.

Key features:

Styles native input and textarea elements.
Integrates with FormField label, hint, error, prefix, and suffix slots.
Supports Angular forms and configurable error state matching.
Supports placeholder, required, disabled, readonly, and focus behavior.

The NgStarter Angular Input component lets you apply NgStarter form styling and FormField integration to native input and textarea controls. Use input[ngsInput] or textarea[ngsInput] for regular text entry such as search, email, password, URL, plain phone-like text, textarea values in forms, filters, settings forms, profile forms, and admin forms. It includes examples for Basic Inputs, Disabled Inputs, Textarea Autosize, and Clear Button.

Basic Inputs

Use ngsInput on native text inputs and textareas, usually inside one ngs-form-field per control.

Disabled Inputs

Use the native disabled attribute when the value cannot be changed.

Textarea Autosize

Add textarea autosize behavior when a plain multiline text field should grow with content.

Clear Button

Put clear actions in the FormField suffix when users need to quickly reset a text value.

Clearable input

Error Messages

Use Angular validation with ngs-error; ngsInput reports error state to FormField.

Input with Hints

Use ngs-hint for helper text such as length limits, format hints, or secondary guidance.

Input with Prefixes and Suffixes

Use FormField prefix and suffix slots for units, icons, clear buttons, and compact supporting actions.