Librería de Formularios para Angular | ng-hub-ui-forms

Campos de formulario accesibles para Angular (input, textarea, slider, select, datepicker) con visualización automática de errores de control/grupo/form, formularios reactivos y variables CSS.

Ejemplos interactivos

Explora ejemplos en vivo que muestran cómo se comporta la librería en casos de uso habituales de Angular.

Campos de texto

El campo `hub-input` con vinculación a reactive forms y visualización de errores automática y sin cableado. Texto, email, contraseña, número y contador, además de etiquetas flotantes y addons de input-group.

Campos de texto y errores automáticos

We'll never share it.

Campos de contraseña: mostrar/ocultar, medidor de fortaleza y autocompletado

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

Número, contador, color, interruptor, casilla

Grupos de entrada, archivo y etiqueta flotante

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

Iconos, botones y campos acoplados a un campo

€
Pick one
From
€
a month
a week
Unassigned
Markdown

Máscaras de patrón (tarjeta, IBAN, teléfono, fecha)

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

Entrada de código de un solo uso (OTP)

Paste the 6-digit code we sent you.

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

Buscador con icono y typeahead

Debounced term (after 300 ms): —

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

Multilínea y rango

Textareas que crecen automáticamente con contadores de caracteres, y sliders de rango de un solo control o de doble control.

Área de texto con contador y autoajuste

0 / 160
Grows as you type.

Slider y rango de doble control

Dual-thumb range.

Estilo del slider (gradient y flush)

Selección

El motor ng-select bifurcado y tematizado con los tokens de hub, además de los formatos button, radio y checkbox que renderizan su propia UI para el mismo valor.

Control segmentado

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

view: list · perks: wifi

Segmented: plantilla de opción personalizada

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

Selección y selección múltiple

Select a country
Pick some tags
Angular
Signals

Opciones agrupadas

Select a city

Typeahead y búsqueda

Type to filter…
Search and add…

Select: typeahead asíncrono

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

Plantillas de opción y etiqueta

Pick a teammate

Botones, radio y formatos de casilla

Select dentro de un modal

Addons y acciones acopladas

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

Selección de fechas

Un selector de fecha o rango construido desde cero sobre Date nativo + CDK Overlay, con límites, navegación por teclado e i18n completa.

Selector de hora — una hora del día

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 y rango

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

Datepicker con hora

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

Granularidad: del año al segundo

 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

Formatos de entrada, valor y visualización

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

Un día con rango de horas

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 —

Subida de ficheros

Un campo de ficheros con arrastrar y soltar, pegado desde el portapapeles, restricciones de tipo y tamaño, previsualización y progreso de subida opcional por fichero.

Fichero único y validación

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

Selected: —

Arrastrar y soltar, límites y previsualización

Progreso de subida, cancelar y reintentar

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

Contenedores y validación

`form[hubForm]`, `hub-fieldset` y `hub-legend` muestran automáticamente los errores a nivel de grupo y de formulario (entre campos), del mismo modo que los campos muestran los errores de control.

Contenedores y errores entre campos

Password

De derecha a izquierda

Todos los campos se voltean con `dir="rtl"`. Casi todo sale gratis —las primitivas están escritas con propiedades lógicas de CSS—, pero el slider, el switch y el control segmentado necesitaron trato aparte, porque su geometría solo es CSS a medias.

De derecha a izquierda — todos los campos espejados

Barcelona
The calendar button changes side.