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

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""

ngs-form-field

PropTypeDefault
subscriptHiddenIfEmpty
Hides the subscript area when there are no hints or errors. Useful for compact toolbar and filter fields.
booleanfalse
sameHeightAsButton
Aligns the form field height with NgStarter button height for dense action rows, toolbar filters, and DataView headers.
booleanfalse