Referencia API

Aquí tienes el contrato completo de forms: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta forms a tu gusto con 14 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`formControlName / [formControl]`	`string \| FormControl`	—	Vincula cualquier campo a un control reactivo. Los errores se muestran automáticamente cuando el control ha sido tocado y es inválido.
`label`	`string`	`''`	Texto de la etiqueta del campo.
`labelType`	`'stacked' \| 'floating' \| 'horizontal'`	`'stacked'`	Posición de la etiqueta.
`placeholder`	`string`	`''`	Texto del placeholder.
`formText`	`string`	—	Texto de ayuda que se muestra debajo del control.
`type (hub-input)`	`'text' \| 'number' \| 'password' \| 'email' \| 'tel' \| 'url' \| 'color' \| 'checkbox' \| 'switch' \| 'counter' \| 'file'`	`'text'`	El formato de hub-input.
`prepend / append (hub-input)`	`string \| string[]`	—	Texto del addon del input-group antes / después del control.
`mask (hub-input)`	`string`	—	Máscara de patrón para formatos de texto. Tokens: 0 = dígito, A = letra, * = alfanumérico; el resto de caracteres son separadores literales. P. ej. "0000 0000 0000 0000".
`unmaskValue (hub-input)`	`boolean`	`false`	Con una máscara definida, almacena en el formulario los caracteres escritos en bruto (sin separadores) en lugar del texto formateado.
`range (hub-slider)`	`boolean`	`false`	Slider de rango de doble control; el valor pasa a ser una tupla [lower, upper].
`format (hub-select)`	`'dropdown' \| 'buttons' \| 'checkbox' \| 'radio'`	`'dropdown'`	Cómo renderiza el select el mismo valor.
`items / bindLabel / bindValue / multiple (hub-select)`	`any[] / string / string / boolean`	—	Opciones, los nombres de propiedad label/value para elementos de tipo objeto, y selección múltiple.
`mode (hub-datepicker)`	`'single' \| 'range'`	`'single'`	Fecha única o rango de fechas.
`min / max / disabledDates (hub-datepicker)`	`string \| Date / (date) => boolean`	—	Límites de fechas seleccionables y un predicado de deshabilitado por fecha.

Outputs

Reacciona a lo que hace forms: 4 eventos a los que enganchar tu lógica.

Nombre	Tipo	Descripción
`valueChange`	`EventEmitter<value>`	Se emite cada vez que cambia el valor del campo.
`submit (form[hubForm])`	`EventEmitter<void>`	Se emite al enviar, después de marcar el árbol como tocado.
`opened / closed / cleared / viewChange (hub-datepicker)`	`EventEmitter`	Eventos de ciclo de vida y navegación del calendario.
`onOpen / onClose / onClear / onSearch / onAdd / onRemove (hub-select)`	`EventEmitter`	Eventos de ciclo de vida del dropdown y de tag/typeahead.

Templates

Hazlo tuyo — 4 plantillas para proyectar tu propio marcado.

Nombre	Descripción	Ejemplo
`hubFormText`	Proyecta contenido enriquecido de texto de ayuda.	`<ng-template hubFormText>…</ng-template>`
`hubValidationError`	Sobrescribe el mensaje para una clave de error determinada.	`<ng-template hubValidationError key="min">…</ng-template>`
`hubLegend`	Contenido personalizado de la leyenda del fieldset.	`<ng-template hubLegend>…</ng-template>`
`ng-option-tmp (hub-select)`	Renderizado personalizado de las opciones del dropdown (directiva ng-select reexportada).	`<ng-template ng-option-tmp let-item="item">…</ng-template>`

Variables CSS

Personaliza cada detalle con 17 variables CSS. Sobrescríbelas en :root o acótalas a un contenedor.

Tokens compartidos de los campos

Elementos comunes a todos los campos: etiqueta, texto de ayuda, feedback de validación y anillo de foco.

Variable	Por defecto	Tipo	Descripción
`--hub-label-font-weight`	`var(--hub-ref-font-weight-medium)`	string	Grosor de la etiqueta del campo.
`--hub-form-feedback-color`	`var(--hub-sys-color-danger)`	color	Color de texto de los errores de validación.
`--hub-form-text-color`	`var(--hub-sys-text-muted)`	color	Color del texto de ayuda.
`--hub-form-focus-ring-color`	`var(--hub-sys-focus-ring-color)`	color	Color del anillo de foco.
`--hub-form-invalid-border-color`	`var(--hub-sys-color-danger)`	color	Color del borde de los controles no válidos.

Input

El estilo de control de texto compartido por input, textarea y el disparador del select.

Variable	Por defecto	Tipo	Descripción
`--hub-input-bg`	`var(--hub-sys-surface-page)`	color	Fondo del control.
`--hub-input-border-color`	`var(--hub-sys-border-color-default)`	color	Color del borde del control.
`--hub-input-border-radius`	`var(--hub-ref-radius-md)`	length	Radio de borde del control.
`--hub-input-padding-y`	`0.375rem`	length	Padding vertical del control.
`--hub-input-padding-x`	`0.75rem`	length	Padding horizontal del control.
`--hub-input-focus-border-color`	`var(--hub-sys-color-primary)`	color	Color del borde al enfocar.

Select, slider y datepicker

Acentos específicos de cada componente que se encadenan a los tokens del sistema.

Variable	Por defecto	Tipo	Descripción
`--hub-select-option-selected-bg`	`var(--hub-sys-color-primary)`	color	Fondo de la opción seleccionada del desplegable.
`--hub-select-value-bg`	`var(--hub-sys-surface-elevated)`	color	Fondo del chip de selección múltiple.
`--hub-slider-track-fill-bg`	`var(--hub-sys-color-primary)`	color	Porción rellena de la pista del slider.
`--hub-slider-thumb-bg`	`var(--hub-sys-color-primary)`	color	Color del control deslizante del slider.
`--hub-daterangepicker-active-bg`	`var(--hub-sys-color-primary)`	color	Fondo del día seleccionado del calendario.
`--hub-daterangepicker-in-range-bg`	`color-mix(in srgb, var(--hub-sys-color-primary) 14%, transparent)`	color	Fondo de los días del calendario dentro del rango.

Estilos y theming

Todavía no hay ejemplos de estilos documentados. Esta sección incluirá recetas de personalización y ejemplos de theming.