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.

Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

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.

Text fields & auto-errors

We'll never share it.

Password fields — toggle, strength meter & autocomplete

While typing with Caps Lock on, a warning hint appears automatically under the field.

Number, counter, color, switch, checkbox

Input groups, file & floating label

$.00
@
No file selected
Deprecated since 22.6.0 — use <hub-file-input> instead.

Icons, buttons and fields attached to a field

€
Pick one
From
€
a month
a week
Unassigned
Markdown

Pattern masks (card, IBAN, phone, date)

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

One-time-code (OTP) input

Paste the 6-digit code we sent you.

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

Search box with icon & typeahead

Debounced term (after 300 ms): —

  • Angular
  • React
  • Vue
  • Svelte
  • Solid
  • Qwik
  • Preact
  • Lit

Multiline & range

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

Textarea with counter & autoresize

0 / 160
Grows as you type.

Slider & dual-thumb range

Dual-thumb range.

Slider styling (gradient & flush)

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.

Segmented control

Single-select — the selected pill slides between options.
Multiple-select — the value is an array.

view: list · perks: wifi

Segmented: Custom Option Template

Single-select — the template renders an icon, the label and a check on the selected segment.
Multiple-select — the same template contract; index comes from the context.

transport: bike · channels: email

Select & multiselect

Select a country
Pick some tags
Angular
Signals

Grouped options

Select a city

Typeahead & search

Type to filter…
Search and add…

Select: Async Typeahead

Type at least 2 characters…
Async typeahead — each term is pushed to the Subject and the results come back from the 'server'.
Pick or type a new tag…
addTag creates an item from the search term when nothing matches.

city: — · tags: —

Custom option & label templates

Pick a teammate

Buttons, radio & checkbox formats

Select inside a modal

Addons & attached actions

€
Pick a tier
/ month
Static addons at both ends, like an input group.
https://api.
Pick a region
A run of addons on one side reads as a single piece.
Pick a product
An action attached to the edge — it acts on whatever is selected.
Pick a plan
EUR
Addon and action together — the action is always the outermost.

Date picking

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

Timepicker — a time of day

Required.
Between 08:00 and 22:00, in quarters.
Fed '09:30:00' — the seconds are trimmed instead of showing nothing.
FromUTC
Emitted value{ "opensAt": null, "closesAt": "09:00", "fromApi": "09:30:00", "shiftFrom": "09:00", "shiftTo": "18:00" } opensAt is required

Datepicker & range

No future dates.
Pick a start, then sweep to preview.

Datepicker with time

Each end carries its own time.
A single instant, minute precision.
Emitted value{ "window": null, "reminder": null }

Granularity: year to second

 2026
2026-09
2026-09-01
2026-09-01T09:00:00+02:00
2026-09-01T09:30:00+02:00
2026-09-01T09:30:45+02:00

Input, value & display formats

—
—
Anything the enum does not cover — here, Unix seconds.
—
An Angular date pattern. The stored value is unaffected.
—
Seeded with '15/06/2026', which no built-in rule would read.
string — 15/06/2026

Day with a time range

One day, two times — never crosses midnight.
Two instants — the ends may fall on different days.
Emitted value{ "meeting": null, "stay": null } meeting spans — · stay spans —

File upload

A file field with drag & drop, clipboard paste, type and size constraints, previews, and optional per-file upload progress.

Single file & validation

Drag the file onto the box, paste it, or browse for it.

Selected: —

Drag & drop, limits & previews

Upload progress, cancel & retry

Uploads start automatically. Rename a file to include “fail” to see the retry button.

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.

Containers & cross-field errors

Password

Right-to-left

Every field mirrors under `dir="rtl"`. Most of that costs nothing — the primitives are written in logical CSS properties — but the slider, the switch and the segmented control needed explicit handling, because their geometry is only half CSS.

Right-to-left — every field mirrored

Barcelona
The calendar button changes side.