Angular Formular-Bibliothek | ng-hub-ui-forms

Barrierefreie Angular-Formularfelder (Input, Textarea, Slider, Select, Datepicker) mit automatischer Anzeige von Fehlern auf Control-, Gruppen- und Formularebene, Reactive Forms und CSS-Variablen.

Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

Textfelder

Das `hub-input`-Feld mit Reactive-Forms-Bindung und automatischer Fehleranzeige ohne Verdrahtung. Text, E-Mail, Passwort, Zahl und Counter sowie Floating Labels und Input-Group-Addons.

Textfelder & automatische Fehler

We'll never share it.

Passwortfelder — Anzeigen-Umschalter, Stärkeanzeige & Autovervollständigung

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

Zahl, Zähler, Farbe, Schalter, Kontrollkästchen

Farbfelder – eine Palette in Feldgröße

favorite: #3b82f6 · status: #16a34a · tag: #7c3aed · accent: rgb(37 99 235)

Eingabegruppen, Datei & schwebendes Label

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

Symbole, Schaltflächen und Felder an einem Feld

€
Pick one
From
€
a month
a week
Unassigned
Markdown

Mustermasken (Karte, IBAN, Telefon, Datum)

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

OTP-Eingabe (Einmalcode)

Paste the 6-digit code we sent you.

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

Suchfeld mit Icon und Typeahead

Debounced term (after 300 ms): —

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

Felder als reiner Text

Read-only, and given a box here by the two readonly tokens — it draws none by default.

Hilfetext: darunter oder hinter einem Zeichen

General

Abgeschnittene Beschriftungen: benannt, nicht gezeichnet

Only the CSS changes. Every label is in the page either way, and so is its for/id pair.
Any status
LineQuantityUnit price
Interface design
€
Front-end implementation
€

Mehrzeilig & Bereich

Automatisch wachsende Textareas mit Zeichenzählern sowie Range-Slider mit einem oder zwei Reglern.

Textbereich mit Zähler & automatischer Größenanpassung

0 / 160
Grows as you type.

Slider & Bereich mit zwei Reglern

Dual-thumb range.

Slider-Styling (Verlauf & flush)

Auswahl

Die geforkte ng-select-Engine, gestaltet mit hub-Tokens, sowie die Button-, Radio- und Checkbox-Formate, die ihre eigene UI für denselben Wert rendern.

Segmented Control

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

view: list · perks: wifi

Eine Zeile, eine Steuerelementhöhe

Sent
Sent

Segmented: Eigenes Options-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

Auswahl & Mehrfachauswahl

Select a country
Pick some tags
Angular
Signals

Gruppierte Optionen

Select a city

Typeahead & Suche

Type to filter…
Search and add…

Select: Asynchroner 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: —

Einen Wert aus dem Suchbegriff anlegen

Type a name and press Enter. The box empties, the list stays open.
Creating one opens a form. The list gets out of the way first — it is drawn above the modal layer.

Last (change): —
Created on the server: —

Eigene Options- und Label-Templates

Pick a teammate

Schaltflächen-, Radio- & Kontrollkästchenformate

Select im Modal

Addons und angefügte Aktionen

€
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.

Datumsauswahl

Eine von Grund auf neu entwickelte Datums-/Bereichsauswahl auf nativem Date + CDK Overlay, mit Grenzen, Tastaturnavigation und vollständigem i18n.

Zeitauswahl — eine Uhrzeit

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 & Bereich

No future dates.
Pick a start, then sweep to preview.
The panel is 268px in every month of the year.
Ellipsised at the default width — widening is global, see below.

Datepicker mit Uhrzeit

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

Granularität: von Jahr bis Sekunde

 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

Eingabe-, Wert- und Anzeigeformate

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

Ein Tag mit Zeitspanne

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 —

Datepicker in einem Modal

Datei-Upload

Ein Dateifeld mit Drag & Drop, Einfügen aus der Zwischenablage, Typ- und Größenbeschränkungen, Vorschauen und optionalem Upload-Fortschritt pro Datei.

Einzelne Datei & Validierung

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

Selected: —

Drag & Drop, Limits & Vorschauen

Upload-Fortschritt, Abbrechen & Wiederholen

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

Inline-Vorschau – die Datei im Feld

  • Claim report.pdf

2 of 5 files

New files: —
Deleted on save: —

Kompakte Darstellung – das Feld in einer Zeile

Company details

The same field, default appearance

Ein Container oder eine Seite, die abgelegte Dateien annimmt

September expenses

Nothing attached yet. Drag a receipt anywhere onto this card.

Container & Validierung

`form[hubForm]`, `fieldset[hubFieldset]` / `hub-fieldset` und `hub-legend` zeigen Fehler auf Gruppen- und Formularebene (feldübergreifend) automatisch an — so wie Felder Control-Fehler anzeigen.

Container & feldübergreifende Fehler

Password
Contact

Von rechts nach links

Jedes Feld spiegelt sich unter `dir="rtl"`. Das meiste kostet nichts — die Primitive sind in logischen CSS-Eigenschaften geschrieben —, doch Slider, Switch und Segmented Control brauchten eine eigene Behandlung, weil ihre Geometrie nur halb aus CSS besteht.

Von rechts nach links — jedes Feld gespiegelt

Barcelona
The calendar button changes side.