API reference

Here's the full contract for forms: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial forms in with 14 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`formControlName / [formControl]`	`string \| FormControl`	—	Binds any field to a reactive control. Errors display automatically when the control is touched and invalid.
`label`	`string`	`''`	Field label text.
`labelType`	`'stacked' \| 'floating' \| 'horizontal'`	`'stacked'`	Label placement.
`placeholder`	`string`	`''`	Placeholder text.
`formText`	`string`	—	Helper text shown below the control.
`type (hub-input)`	`'text' \| 'number' \| 'password' \| 'email' \| 'tel' \| 'url' \| 'color' \| 'checkbox' \| 'switch' \| 'counter' \| 'file'`	`'text'`	The hub-input format.
`prepend / append (hub-input)`	`string \| string[]`	—	Input-group addon text before / after the control.
`mask (hub-input)`	`string`	—	Pattern mask for text formats. Tokens: 0 = digit, A = letter, * = alphanumeric; other chars are literal separators. E.g. "0000 0000 0000 0000".
`unmaskValue (hub-input)`	`boolean`	`false`	With a mask set, store the raw typed characters (no separators) in the form instead of the formatted text.
`range (hub-slider)`	`boolean`	`false`	Dual-thumb range slider; value becomes a [lower, upper] tuple.
`format (hub-select)`	`'dropdown' \| 'buttons' \| 'checkbox' \| 'radio'`	`'dropdown'`	How the select renders the same value.
`items / bindLabel / bindValue / multiple (hub-select)`	`any[] / string / string / boolean`	—	Options, the label/value property names for object items, and multi-select.
`mode (hub-datepicker)`	`'single' \| 'range'`	`'single'`	Single date or date range.
`min / max / disabledDates (hub-datepicker)`	`string \| Date / (date) => boolean`	—	Selectable-date bounds and a per-date disabled predicate.

Outputs

React to what forms does — 4 events to hook your logic onto.

Name	Type	Description
`valueChange`	`EventEmitter<value>`	Emits whenever the field value changes.
`submit (form[hubForm])`	`EventEmitter<void>`	Emits on submit, after the tree is marked as touched.
`opened / closed / cleared / viewChange (hub-datepicker)`	`EventEmitter`	Calendar lifecycle and navigation events.
`onOpen / onClose / onClear / onSearch / onAdd / onRemove (hub-select)`	`EventEmitter`	Dropdown lifecycle and tag/typeahead events.

Templates

Make it yours — 4 template slots let you project custom markup.

Name	Description	Example
`hubFormText`	Project rich helper-text content.	`<ng-template hubFormText>…</ng-template>`
`hubValidationError`	Override the message for a given error key.	`<ng-template hubValidationError key="min">…</ng-template>`
`hubLegend`	Custom fieldset legend content.	`<ng-template hubLegend>…</ng-template>`
`ng-option-tmp (hub-select)`	Custom dropdown option rendering (re-exported ng-select directive).	`<ng-template ng-option-tmp let-item="item">…</ng-template>`

CSS variables

Theme every pixel with 17 CSS variables. Override them at :root or scope them to a wrapper.

Shared field tokens

Chrome shared by every field: label, helper text, validation feedback and focus ring.

Variable	Default	Type	Description
`--hub-label-font-weight`	`var(--hub-ref-font-weight-medium)`	string	Field label weight.
`--hub-form-feedback-color`	`var(--hub-sys-color-danger)`	color	Validation-error text color.
`--hub-form-text-color`	`var(--hub-sys-text-muted)`	color	Helper-text color.
`--hub-form-focus-ring-color`	`var(--hub-sys-focus-ring-color)`	color	Focus ring color.
`--hub-form-invalid-border-color`	`var(--hub-sys-color-danger)`	color	Invalid control border color.

Input

The text-control skin shared by input, textarea and the select trigger.

Variable	Default	Type	Description
`--hub-input-bg`	`var(--hub-sys-surface-page)`	color	Control background.
`--hub-input-border-color`	`var(--hub-sys-border-color-default)`	color	Control border color.
`--hub-input-border-radius`	`var(--hub-ref-radius-md)`	length	Control border radius.
`--hub-input-padding-y`	`0.375rem`	length	Control vertical padding.
`--hub-input-padding-x`	`0.75rem`	length	Control horizontal padding.
`--hub-input-focus-border-color`	`var(--hub-sys-color-primary)`	color	Border color on focus.

Select, slider & datepicker

Component-specific accents that chain to the system tokens.

Variable	Default	Type	Description
`--hub-select-option-selected-bg`	`var(--hub-sys-color-primary)`	color	Selected dropdown option background.
`--hub-select-value-bg`	`var(--hub-sys-surface-elevated)`	color	Multi-select chip background.
`--hub-slider-track-fill-bg`	`var(--hub-sys-color-primary)`	color	Filled portion of the slider track.
`--hub-slider-thumb-bg`	`var(--hub-sys-color-primary)`	color	Slider thumb color.
`--hub-daterangepicker-active-bg`	`var(--hub-sys-color-primary)`	color	Selected calendar day background.
`--hub-daterangepicker-in-range-bg`	`color-mix(in srgb, var(--hub-sys-color-primary) 14%, transparent)`	color	In-range calendar day background.

Styling and theming

No styling examples are documented yet. This section will include customization recipes and theming examples.