Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

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.
PropTypeDefault
id
Unique identifier for the input
stringngs-input-n
placeholder
Placeholder text for the input
string""
required
Whether the input is required
booleanfalse
disabled
Whether the input is disabled
booleanfalse
readonly
Whether the input is readonly
booleanfalse
errorStateMatcher
Object used to control when error messages are shown
ErrorStateMatcher
value
Value of the input
string""