Angular Forms Library | ng-hub-ui-forms

Accessible Angular form fields (input, textarea, slider, select, datepicker) with automatic control/group/form error display, reactive forms and CSS variables.

Overview

Why teams search for this library

Use this Angular forms library when you need accessible form fields with automatic validation-error display, a forked ng-select, a from-scratch datepicker and runtime CSS-variable theming — without Bootstrap.

Install

npm install ng-hub-ui-forms

Jump to

Ideal for

  • signup and checkout forms
  • settings pages
  • filters and search
  • admin dashboards

About forms

ng-hub-ui-forms unifies every form field behind one contract: bind it with reactive forms and the matching errors appear automatically at the control, group and form level. Fields are standalone, OnPush and signal-native; the select is a maintained fork of ng-select themed with hub tokens; the datepicker is built on native Date and the Angular CDK overlay. Everything is themed through canonical --hub-* CSS variables, with runtime dark mode.

Feature guides

Text fields

The `hub-input` field with reactive-forms binding and automatic, zero-wiring error display. Text, email, password, number and counter, plus floating labels and input-group addons.

Examples:
Text fields & auto-errors

Text fields & auto-errors

We'll never share it.
Number, counter, color, switch, checkbox

Number, counter, color, switch, checkbox

Input groups, file & floating label

Input groups, file & floating label

$.00
@
No file selected
Pattern masks (card, IBAN, phone, date)

Pattern masks (card, IBAN, phone, date)

Form value: { "card": "", "expiry": "", "iban": "", "phone": "", "date": "" }

One-time-code (OTP) input

One-time-code (OTP) input

Paste the 6-digit code we sent you.

Form value: { "code": "", "pin": "", "coupon": "" }

Multiline & range

Auto-growing textareas with character counters, and single / dual-thumb range sliders.

Examples:
Textarea with counter & autoresize

Textarea with counter & autoresize

0 / 160
Grows as you type.
Slider & dual-thumb range

Slider & dual-thumb range

Dual-thumb range.

Selection

The forked ng-select engine themed with hub tokens, plus the button, radio and checkbox formats that render their own UI for the same value.

Examples:
Select & multiselect

Select & multiselect

Select a country
Pick some tags
Grouped options

Grouped options

Select a city
Typeahead & search

Typeahead & search

Type to filter…
Search and add…
Custom option & label templates

Custom option & label templates

Pick a teammate
Buttons, radio & checkbox formats

Buttons, radio & checkbox formats

Date picking

A from-scratch date / range picker on native Date + CDK Overlay, with bounds, keyboard navigation and full i18n.

Examples:
Datepicker & range

Datepicker & range

No future dates.
Date range.

Containers & validation

`form[hubForm]`, `hub-fieldset` and `hub-legend` surface group-level and form-level (cross-field) errors automatically — the same way fields surface control errors.

Examples:
Containers & cross-field errors

Containers & cross-field errors

Password

Key features

Recent changes

Version 21.0.0 - 6/13/26, 12:00 AM

added: Initial release: hub-input (10 formats), hub-textarea, hub-slider (single + range), hub-select (dropdown + buttons/radio/checkbox), hub-datepicker (single + range), hub-form/hub-fieldset/hub-legend containers.

added: Automatic validation-error display at control, group and form level, with provideHubForms() configuration.

Related libraries

ng-hub-ui-utils ng-hub-ui-modal ng-hub-ui-calendar