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.
Styles
Mixins and styles
Override any of the `--hub-file-input-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).
Theming with hub-segmented-theme
The selected pill follows the themed accent and radius.
Focus me to see the themed focus ring.
Theming with hub-file-input-theme
| Mixin | Parameters | Description |
|---|---|---|
| Theming | ||
hub-file-input-theme() | $bg--hub-file-input-bg$color--hub-file-input-color$border-width--hub-file-input-border-width$border-style--hub-file-input-border-style$border-color--hub-file-input-border-color$border-radius--hub-file-input-border-radius$padding-x--hub-file-input-padding-x$padding-y--hub-file-input-padding-y$min-height--hub-file-input-min-height$gap--hub-file-input-gap$hover-bg--hub-file-input-hover-bg$hover-border-color--hub-file-input-hover-border-color$dragover-bg--hub-file-input-dragover-bg$dragover-border-color--hub-file-input-dragover-border-color$prompt-color--hub-file-input-prompt-color$browse-color--hub-file-input-browse-color$hint-color--hub-file-input-hint-color$icon--hub-file-input-icon$icon-size--hub-file-input-icon-size$icon-color--hub-file-input-icon-color$file-icon--hub-file-input-file-icon$file-icon-color--hub-file-input-file-icon-color$remove-icon--hub-file-input-remove-icon$cancel-icon--hub-file-input-cancel-icon$retry-icon--hub-file-input-retry-icon$done-icon--hub-file-input-done-icon$done-color--hub-file-input-done-color$item-bg--hub-file-input-item-bg$item-border-color--hub-file-input-item-border-color$item-border-radius--hub-file-input-item-border-radius$thumb-size--hub-file-input-thumb-size$grid-min-width--hub-file-input-grid-min-width$grid-thumb-height--hub-file-input-grid-thumb-height$progress-height--hub-file-input-progress-height$progress-track-bg--hub-file-input-progress-track-bg$progress-bar-bg--hub-file-input-progress-bar-bg | One-call theming for `<hub-file-input>` |
hub-forms-theme() | $focus-ring-color--hub-form-focus-ring-color$focus-ring-width--hub-form-focus-ring-width$invalid-color--hub-form-invalid-color--hub-form-invalid-border-color$valid-color--hub-form-valid-color--hub-form-valid-border-color$disabled-opacity--hub-form-disabled-opacity$transition--hub-form-transition | One-call theming for the shared `ng-hub-ui-forms` chrome |
hub-segmented-theme() | $bg--hub-segmented-bg$selected-bg--hub-segmented-selected-bg$selected-color--hub-segmented-selected-color$radius--hub-segmented-radius$gap--hub-segmented-gap$padding-x--hub-segmented-padding-x$padding-y--hub-segmented-padding-y | One-call theming for `<hub-segmented>` |
CSS variables
Theme every pixel with 297 CSS variables. Override them at :root or scope them to a wrapper.
Form
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-form-fieldset-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Form fieldset border color |
--hub-form-fieldset-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Form fieldset border radius |
--hub-form-fieldset-border-width | var(--hub-ref-border-width, 1px) | length | Form fieldset border width |
--hub-form-fieldset-padding-x | var(--hub-ref-space-3, 1rem) | length | Fieldset horizontal padding |
--hub-form-fieldset-padding-y | var(--hub-ref-space-3, 1rem) | length | Fieldset vertical padding |
--hub-form-focus-ring-color | var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | color | Form focus ring color |
--hub-form-focus-ring-width | var(--hub-sys-focus-ring-width, 0.25rem) | length | Form focus ring width |
--hub-form-feedback-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Form feedback font size |
--hub-form-feedback-margin-top | var(--hub-ref-space-1, 0.25rem) | length | Form feedback margin top |
--hub-form-invalid-border-color | var(--hub-sys-color-danger, #dc3545) | color | Form invalid border color |
--hub-form-invalid-color | var(--hub-sys-color-danger, #dc3545) | color | Form invalid color |
--hub-form-text-color | var(--hub-sys-text-muted, #6c757d) | color | Form text color |
--hub-form-text-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Form text font size |
--hub-form-text-margin-top | var(--hub-ref-space-1, 0.25rem) | length | Form text margin top |
--hub-form-disabled-opacity | var(--hub-sys-opacity-disabled, 0.65) | number | Disabled field opacity |
--hub-form-feedback-color | var(--hub-form-invalid-color) | color | Validation feedback text color |
--hub-form-field-gap | var(--hub-ref-space-1, 0.25rem) | length | Gap between label and control |
--hub-field-stack-gap | 0 | length | Space a field leaves under itself when fields are stacked one under another. Zero by default — the gap has always been the container's to give — so nothing moves for an existing form; set it to hand that job to the fields instead. hubFormControlAdapter zeroes it on every control it builds, so a field created into another component's chrome never reserves room below itself. The default is the **fallback of the rule that reads it**, not a :root declaration: a declaration ties with a consumer's own and the winner is decided by import order alone |
--hub-field-floating-inset | 1.125rem | length | Room a floating label needs above the value: added to the field's top padding and to its minimum height, so the label lifts into space that already exists instead of over the text. Shared by every field type — an input, a select and a datepicker with a floating label are the same height because they read this same value |
--hub-field-floating-travel | 0.375rem | length | How far the label rises when the field is focused or filled. Applied as a translateY after the scale, so it is measured in the shrunk label's own units, not the field's |
--hub-field-floating-scale | 0.75 | string | How much the label shrinks once lifted. Three quarters of the 16px base is the 12px Material settles on; anything closer to 1 leaves the label still reading as a placeholder, which defeats lifting it |
--hub-form-invalid-focus-ring-color | var(--hub-sys-color-danger-subtle, rgba(220, 53, 69, 0.25)) | color | Invalid field focus ring color |
--hub-form-valid-color | var(--hub-sys-color-success, #198754) | color | Valid (success) field accent color — opt-in via showValid |
--hub-form-valid-border-color | var(--hub-sys-color-success, #198754) | color | Valid field border color (opt-in) |
--hub-form-valid-focus-ring-color | var(--hub-sys-color-success-subtle, rgba(25, 135, 84, 0.25)) | color | Valid field focus ring color (opt-in) |
--hub-form-valid-feedback-color | var(--hub-form-valid-color) | color | Valid (success) feedback text color |
--hub-form-label-horizontal-max-width | 12rem | length | Horizontal label max width |
--hub-form-required-color | var(--hub-sys-color-danger, #dc3545) | color | Required field marker color |
--hub-form-row-gap | var(--hub-ref-space-3, 1rem) | length | Horizontal label gutter gap |
--hub-form-transition | border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out | transition | Shared field transition |
Input
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-input-bg | var(--hub-sys-surface-page, #fff) | color | Control background. |
--hub-input-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Control border color. |
--hub-input-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Control border radius. |
--hub-input-border-width | var(--hub-ref-border-width, 1px) | length | Input border width |
--hub-input-color | var(--hub-sys-text-primary, #212529) | color | Input color |
--hub-input-focus-border-color | var(--hub-sys-color-primary, #0d6efd) | color | Border color on focus. |
--hub-input-focus-box-shadow | 0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color) | shadow | Input focus box shadow |
--hub-input-font-family | var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) | string | Input font family |
--hub-input-font-size | var(--hub-ref-font-size-base, 1rem) | length | Input font size |
--hub-input-font-weight | var(--hub-ref-font-weight-base, 400) | number | Input font weight |
--hub-input-group-action-bg | var(--hub-sys-color-secondary-subtle, #e9ecef) | color | Fill of attached content that can be operated ([hubPrepend]/[hubAppend] buttons); static addons take the field surface instead |
--hub-input-group-action-color | var(--hub-sys-color-secondary-emphasis, #41464b) | color | Ink of attached content that can be operated |
--hub-input-group-attached-radius | 0 | length | Radius of the corners a group shares — the control's and the attached strip's. Zero welds them into one line; set it to the field radius to unweld the group, which is what a field drawn without a box wants |
--hub-input-group-attached-gap | 0 | length | Space between the elements a slot projects. Zero makes a run of actions read as one strip |
--hub-input-group-attached-border-width | var(--hub-input-border-width) | length | Border of attached content, kept apart from the field's own so a field can drop its box without erasing the outline of the buttons beside it |
--hub-input-group-attached-border-color | var(--hub-input-border-color) | color | Colour of that border. currentColor lets each action keep its own — a destructive one stays red instead of being repainted the field's grey |
--hub-input-group-addon-bg | var(--hub-input-bg) | color | Input group addon bg |
--hub-input-group-addon-border-color | var( --hub-input-border-color ) | color | Input group addon border color |
--hub-input-group-addon-color | var(--hub-sys-text-muted, #6c757d) | color | Input group addon color |
--hub-input-line-height | var(--hub-ref-line-height-base, 1.5) | number | Input line height |
--hub-input-padding-x | 0.75rem | length | Control horizontal padding. |
--hub-input-padding-y | 0.375rem | length | Control vertical padding. |
--hub-input-placeholder-color | var(--hub-sys-text-muted, #6c757d) | color | Input placeholder color |
--hub-input-readonly-bg | transparent | color | Read-only field background |
--hub-input-readonly-border-color | transparent | color | Read-only field border color |
--hub-input-readonly-color | var(--hub-input-color) | color | Read-only field text color — full contrast, the value is there to be read |
--hub-input-readonly-cursor | default | string | Read-only field cursor |
--hub-input-transition | var(--hub-form-transition) | transition | Input transition |
--hub-input-wrapper-gap | var(--hub-ref-space-2, 0.5rem) | length | Input wrapper gap |
--hub-textarea-border-radius | var( --hub-input-border-radius ) | length | Textarea border radius |
--hub-textarea-min-height | 4.5rem | length | Textarea min height |
--hub-textarea-padding-x | var(--hub-input-padding-x) | length | Textarea padding x |
--hub-textarea-padding-y | var(--hub-input-padding-y) | length | Textarea padding y |
--hub-input-color-size | 2.5rem | color | Color input swatch size |
--hub-input-counter-button-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Counter stepper button background |
--hub-input-counter-button-color | var(--hub-sys-text-primary, #212529) | color | Counter stepper button color |
--hub-input-counter-button-width | 2.5rem | length | Counter stepper button width |
--hub-input-eye-mask | url("data:image/svg+xml,…") | url | Password visibility toggle eye icon |
--hub-input-icon-color | var(--hub-sys-text-muted, #6c757d) | color | Color of the in-field icon affix. |
--hub-input-icon-size | var(--hub-ref-font-size-base, 1rem) | length | Size of the in-field icon affix. |
--hub-input-affix-inset | var(--hub-input-padding-x) | length | Affix inset from the field edge |
--hub-input-affix-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between the affix and the control text |
--hub-input-clear-icon | url("data:image/svg+xml,…") | url | Clear (✕) button glyph, as a mask image — swap it to restyle the icon. |
--hub-input-clear-size | var(--hub-ref-font-size-base, 1rem) | length | Clear button size |
--hub-input-clear-color | var(--hub-sys-text-muted, #6c757d) | color | Clear button color. |
--hub-input-clear-hover-color | var(--hub-sys-color-danger, #dc3545) | color | Clear button color on hover / focus. |
--hub-input-password-toggle-width | 2.5rem | length | Password reveal toggle addon width |
--hub-input-capslock-color | var(--hub-sys-color-warning, #997404) | color | Caps Lock hint text color |
--hub-input-strength-height | 0.25rem | length | Strength meter segment height |
--hub-input-strength-gap | 0.25rem | length | Gap between strength meter segments |
--hub-input-strength-track | var(--hub-input-border-color) | string | Strength meter inactive segment (track) color |
--hub-input-strength-1 | var(--hub-sys-color-danger, #dc3545) | color | Strength meter color at level 1 (weak) |
--hub-input-strength-2 | var(--hub-sys-color-warning, #ffc107) | color | Strength meter color at level 2 (fair) |
--hub-input-strength-3 | var(--hub-sys-color-info, #0dcaf0) | color | Strength meter color at level 3 (good) |
--hub-input-strength-4 | var(--hub-sys-color-success, #198754) | color | Strength meter color at level 4 (strong) |
--hub-input-strength-color | var(--hub-input-strength-1) | color | Active strength-segment color, cascaded per level from the tokens above |
File input
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-file-input-bg | var(--hub-sys-surface-page, #fff) | color | Dropzone background |
--hub-file-input-color | var(--hub-sys-text-primary, #212529) | color | Dropzone text color |
--hub-file-input-border-width | var(--hub-ref-border-width, 1px) | length | Dropzone border width |
--hub-file-input-border-style | dashed | border | Dropzone border style |
--hub-file-input-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Dropzone border color at rest |
--hub-file-input-border-radius | var(--hub-input-border-radius) | length | Dropzone corner radius |
--hub-file-input-padding-x | var(--hub-ref-space-3, 1rem) | length | Dropzone horizontal padding |
--hub-file-input-padding-y | var(--hub-ref-space-4, 1.5rem) | length | Dropzone vertical padding |
--hub-file-input-min-height | 7rem | length | Dropzone minimum height |
--hub-file-input-gap | var(--hub-ref-space-2, 0.5rem) | length | Gutter between dropzone icon, prompt and hint |
--hub-file-input-transition | var(--hub-form-transition) | transition | Dropzone and action-button transition |
--hub-file-input-hover-border-color | var(--hub-sys-color-primary, #0d6efd) | color | Dropzone border color on hover |
--hub-file-input-hover-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Dropzone background on hover |
--hub-file-input-dragover-bg | color-mix(in oklch, var(--hub-sys-color-primary, #0d6efd) 8%, transparent) | color | Dropzone background while a drag hovers it |
--hub-file-input-dragover-border-color | var(--hub-sys-color-primary, #0d6efd) | color | Dropzone border color while a drag hovers it |
--hub-file-input-focus-border-color | var(--hub-input-focus-border-color) | color | Dropzone border color on keyboard focus |
--hub-file-input-focus-box-shadow | var(--hub-input-focus-box-shadow) | shadow | Dropzone focus ring |
--hub-file-input-prompt-color | var(--hub-sys-text-muted, #6c757d) | color | Drop-invitation text color |
--hub-file-input-prompt-font-size | var(--hub-ref-font-size-base, 1rem) | length | Drop-invitation font size |
--hub-file-input-browse-color | var(--hub-sys-color-primary, #0d6efd) | color | Browse-action text color |
--hub-file-input-browse-font-weight | var(--hub-ref-font-weight-medium, 500) | number | Browse-action font weight |
--hub-file-input-hint-color | var(--hub-sys-text-muted, #6c757d) | color | Constraints-hint text color |
--hub-file-input-hint-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Constraints-hint font size |
--hub-file-input-icon | url("data:image/svg+xml,…") | url | Upload glyph of the dropzone as a mask image |
--hub-file-input-icon-size | 2rem | length | Upload glyph size |
--hub-file-input-icon-color | var(--hub-sys-text-muted, #6c757d) | color | Upload glyph tint |
--hub-file-input-file-icon | url("data:image/svg+xml,…") | url | Per-file glyph (files with no thumbnail) as a mask image |
--hub-file-input-file-icon-size | 1.5rem | length | Per-file glyph size |
--hub-file-input-file-icon-color | var(--hub-sys-text-muted, #6c757d) | color | Per-file glyph tint |
--hub-file-input-remove-icon | url("data:image/svg+xml,…") | url | Remove-file button glyph as a mask image |
--hub-file-input-cancel-icon | url("data:image/svg+xml,…") | url | Cancel-upload button glyph as a mask image |
--hub-file-input-retry-icon | url("data:image/svg+xml,…") | url | Retry-upload button glyph as a mask image |
--hub-file-input-done-icon | url("data:image/svg+xml,…") | url | Finished-upload tick as a mask image |
--hub-file-input-done-color | var(--hub-sys-color-success, #198754) | color | Finished-upload tick and item border color |
--hub-file-input-action-size | 1rem | length | Per-file action button size |
--hub-file-input-action-color | var(--hub-sys-text-muted, #6c757d) | color | Per-file action button tint |
--hub-file-input-action-hover-color | var(--hub-sys-text-primary, #212529) | color | Per-file action button tint on hover |
--hub-file-input-remove-hover-color | var(--hub-sys-color-danger, #dc3545) | color | Remove button tint on hover |
--hub-file-input-list-gap | var(--hub-ref-space-2, 0.5rem) | length | Gutter between file rows |
--hub-file-input-list-margin-top | var(--hub-ref-space-2, 0.5rem) | length | Space between the dropzone and the file list |
--hub-file-input-item-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | File row/tile background |
--hub-file-input-item-color | var(--hub-sys-text-primary, #212529) | color | File row/tile text color |
--hub-file-input-item-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | File row/tile border color |
--hub-file-input-item-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | File row/tile corner radius |
--hub-file-input-item-padding-x | var(--hub-ref-space-2, 0.5rem) | length | File row/tile horizontal padding |
--hub-file-input-item-padding-y | var(--hub-ref-space-2, 0.5rem) | length | File row/tile vertical padding |
--hub-file-input-item-gap | var(--hub-ref-space-2, 0.5rem) | length | Gutter between thumbnail, metadata and actions |
--hub-file-input-name-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | File name font size |
--hub-file-input-size-color | var(--hub-sys-text-muted, #6c757d) | color | File size text color |
--hub-file-input-size-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | File size font size |
--hub-file-input-error-color | var(--hub-sys-color-danger, #dc3545) | color | Failed-upload message and item border color |
--hub-file-input-error-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Failed-upload message font size |
--hub-file-input-clear-color | var(--hub-sys-text-muted, #6c757d) | color | Remove-all button text color |
--hub-file-input-clear-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Remove-all button font size |
--hub-file-input-thumb-size | 2.5rem | length | Thumbnail size in list preview |
--hub-file-input-thumb-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Thumbnail corner radius |
--hub-file-input-thumb-bg | var(--hub-sys-surface-page, #fff) | color | Thumbnail background behind a transparent image |
--hub-file-input-grid-min-width | 8rem | length | Minimum tile width in grid preview |
--hub-file-input-grid-gap | var(--hub-ref-space-2, 0.5rem) | length | Gutter between tiles in grid preview |
--hub-file-input-grid-thumb-height | 6rem | length | Thumbnail height in grid preview |
--hub-file-input-progress-height | 0.25rem | length | Upload progress bar thickness |
--hub-file-input-progress-radius | var(--hub-ref-radius-pill, 50rem) | length | Upload progress bar corner radius |
--hub-file-input-progress-track-bg | var(--hub-sys-border-color-default, #dee2e6) | color | Upload progress bar track color |
--hub-file-input-progress-bar-bg | var(--hub-sys-color-primary, #0d6efd) | color | Upload progress bar fill color |
--hub-file-input-progress-indeterminate-duration | 1.2s | transition | Sweep duration when the upload total is unknown |
--hub-file-input-prompt-direction | row | string | Flex direction of the dropzone prompt (row, or column to stack the invitation over the browse action) |
--hub-file-input-prompt-align | baseline | string | Cross-axis alignment of the dropzone prompt |
--hub-file-input-prompt-gap | 0.25em | length | Gutter between the invitation and the browse action |
--hub-file-input-drop-text-color | inherit | color | Invitation line colour |
--hub-file-input-drop-text-font-size | inherit | length | Invitation line font size |
--hub-file-input-drop-text-font-weight | inherit | number | Invitation line font weight |
--hub-file-input-drop-subtext-color | var(--hub-file-input-hint-color) | color | Second invitation line colour |
--hub-file-input-drop-subtext-font-size | var(--hub-file-input-hint-font-size) | length | Second invitation line font size |
--hub-file-input-browse-font-size | inherit | length | Browse-action font size |
--hub-file-input-browse-text-decoration | underline | string | Browse-action text decoration |
--hub-file-input-browse-bg | transparent | color | Browse-action background (set it to render the affordance as a button) |
--hub-file-input-browse-hover-bg | var(--hub-file-input-browse-bg) | color | Browse-action background on hover |
--hub-file-input-browse-padding-x | 0 | length | Browse-action horizontal padding |
--hub-file-input-browse-padding-y | 0 | length | Browse-action vertical padding |
--hub-file-input-browse-radius | 0 | length | Browse-action corner radius |
--hub-file-input-browse-gap | var(--hub-ref-space-2, 0.5rem) | length | Gutter between the browse-action glyph and its label |
--hub-file-input-browse-icon | none | string | Optional leading glyph of the browse action, as a mask image |
--hub-file-input-browse-icon-display | none | string | Display of the browse-action glyph; none keeps it off |
--hub-file-input-browse-icon-size | 1.125em | length | Browse-action glyph size |
--hub-file-input-icon-bg | transparent | color | Medallion surface behind the dropzone glyph; transparent keeps it off |
--hub-file-input-icon-chip-size | var(--hub-file-input-icon-size) | length | Medallion size behind the dropzone glyph |
--hub-file-input-icon-chip-radius | 0 | length | Medallion corner radius behind the dropzone glyph |
--hub-file-input-browse-margin-top | 0 | length | Space above the browse action when the prompt is stacked into a column |
Select
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-select-arrow-color | var(--hub-sys-text-muted, #6c757d) | color | Select arrow color |
--hub-select-arrow-size | 5px | length | Border of the caret's CSS triangle (its width is 2×, its height 1×); tune to follow a denser field scale |
--hub-select-arrow-gap | var(--hub-ref-space-2, 0.5rem) | length | Inline clearance of the caret wrapper — separation from the value and from the field edge |
--hub-select-bg | var(--hub-input-bg) | color | Select bg |
--hub-select-border-color | var( --hub-input-border-color ) | color | Select border color |
--hub-select-border-radius | var( --hub-input-border-radius ) | length | Select border radius |
--hub-select-border-width | var( --hub-input-border-width ) | length | Select border width |
--hub-select-clear-color | var(--hub-sys-text-muted, #6c757d) | color | Select clear color |
--hub-select-clear-hover-color | var(--hub-sys-color-danger, #dc3545) | color | Select clear hover color |
--hub-select-color | var(--hub-input-color) | color | Select color |
--hub-select-dropdown-bg | var(--hub-sys-surface-page, #fff) | color | Select dropdown bg |
--hub-select-dropdown-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Select dropdown border color |
--hub-select-dropdown-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Select dropdown border radius |
--hub-select-dropdown-box-shadow | var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)) | shadow | Select dropdown box shadow |
--hub-select-focus-border-color | var( --hub-input-focus-border-color ) | color | Select focus border color |
--hub-select-focus-box-shadow | var( --hub-input-focus-box-shadow ) | shadow | Select focus box shadow |
--hub-select-font-size | var(--hub-input-font-size) | length | Select font size |
--hub-select-option-color | var(--hub-sys-text-primary, #212529) | color | Select option color |
--hub-select-option-marked-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Select option marked bg |
--hub-select-option-padding-x | var(--hub-ref-space-3, 1rem) | length | Select option padding x |
--hub-select-option-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Select option padding y |
--hub-select-option-selected-bg | var(--hub-sys-color-primary, #0d6efd) | color | Selected dropdown option background. |
--hub-select-option-selected-color | var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff)) | color | Select option selected color |
--hub-select-padding-x | var(--hub-input-padding-x) | length | Select padding x |
--hub-select-group-action-bg | var(--hub-input-group-action-bg) | color | Select attached-action fill |
--hub-select-group-action-color | var(--hub-input-group-action-color) | color | Select attached-action ink |
--hub-select-group-attached-radius | var(--hub-input-group-attached-radius) | length | Select group seam radius |
--hub-select-group-attached-gap | var(--hub-input-group-attached-gap) | length | Select attached-content gap |
--hub-select-group-attached-border-width | var(--hub-select-border-width) | length | Select attached-content border width |
--hub-select-group-attached-border-color | var(--hub-select-border-color) | color | Select attached-content border colour |
--hub-select-group-addon-bg | var(--hub-input-group-addon-bg) | color | Select group addon bg (prepend/append) |
--hub-select-group-addon-border-color | var(--hub-input-group-addon-border-color) | color | Select group addon border color (prepend/append) |
--hub-select-group-addon-color | var(--hub-input-group-addon-color) | color | Select group addon color (prepend/append) |
--hub-select-placeholder-color | var( --hub-input-placeholder-color ) | color | Select placeholder color |
--hub-select-value-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Multi-select chip background. |
--hub-select-value-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Select value border radius |
--hub-select-value-color | var(--hub-sys-text-primary, #212529) | color | Select value color |
--hub-select-button-bg | var(--hub-sys-surface-page, #fff) | color | Segmented select button background |
--hub-select-button-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Segmented select button border color |
--hub-select-button-color | var(--hub-sys-text-primary, #212529) | color | Segmented select button text color |
--hub-select-button-gap | var(--hub-ref-space-2, 0.5rem) | length | Segmented select button gap |
--hub-select-button-padding-x | var(--hub-ref-space-3, 1rem) | length | Segmented select button horizontal padding |
--hub-select-button-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Segmented select button vertical padding |
--hub-select-button-selected-bg | var(--hub-sys-color-primary, #0d6efd) | color | Selected segmented button background |
--hub-select-button-selected-border-color | var(--hub-sys-color-primary, #0d6efd) | color | Selected segmented button border color |
--hub-select-button-selected-color | var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff)) | color | Selected segmented button text color |
--hub-select-min-height | calc( var(--hub-input-line-height) * var(--hub-input-font-size) + 2 * var(--hub-input-padding-y) + 2 * var(--hub-input-border-width) ) | length | Minimum height of the select control. Derived rather than declared: it spells out the height an input reaches by construction — one line of text between two paddings and two borders — because a select is a div and inherits none of it. Held as a number it drifted, and the select stood 2px taller than every other field |
--hub-select-optgroup-color | var(--hub-sys-text-muted, #6c757d) | color | Select option group label color |
--hub-select-dropdown-zindex | var(--hub-select-dropdown-z-index, calc(var(--hub-sys-zindex-modal, 1055) + 5)) | number | Stacking of the ng-select dropdown panel (canonical zindex spelling); sits above HubModal so a select inside a modal is not clipped |
--hub-select-dropdown-z-index | calc(var(--hub-sys-zindex-modal, 1055) + 5) | number | Deprecated spelling — default carrier and override bridge for --hub-select-dropdown-zindex; scheduled for removal after one release cycle |
Check & radio
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-check-input-bg | var(--hub-input-bg) | color | Check input bg |
--hub-check-input-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Check input border color |
--hub-check-input-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Check input border radius |
--hub-check-input-border-width | var(--hub-input-border-width) | length | Check input border width |
--hub-check-input-checked-bg | var(--hub-sys-color-primary, #0d6efd) | color | Check input checked bg |
--hub-check-input-checked-border-color | var(--hub-sys-color-primary, #0d6efd) | color | Check input checked border color |
--hub-check-input-checked-icon | url("data:image/svg+xml,…") | url | Check input checked icon |
--hub-check-input-height | 1.15rem | length | Check input height |
--hub-check-input-width | 1.15rem | length | Check input width |
--hub-check-radio-border-radius | 50% | length | Check radio border radius |
--hub-check-label-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between check control and label |
Datepicker
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-datepicker-icon | url("data:image/svg+xml,…") | url | Datepicker icon |
--hub-datepicker-icon-size | 1rem | length | Datepicker icon size |
--hub-timepicker-width | fit-content | length | Width of the time field. Sized to its content by default, because an HH:MM control that stretches across a form row reads as if it expected more than four digits |
--hub-timepicker-min-width | 8rem | length | Floor for that width, so the native stepper and the AM/PM segment still fit where a locale shows them |
--hub-timepicker-indicator-opacity | 0.6 | number | Opacity of the browser's own clock indicator, dimmed so it sits with the field's chrome instead of competing with it |
--hub-datepicker-icon-width | 2.5rem | length | Datepicker icon width |
--hub-daterangepicker-padding-x | var(--hub-ref-space-3, 1rem) | length | Calendar panel horizontal padding |
--hub-daterangepicker-padding-y | var(--hub-ref-space-3, 1rem) | length | Calendar panel vertical padding |
Date range picker
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-daterangepicker-active-bg | var(--hub-sys-color-primary, #0d6efd) | color | Selected calendar day background. |
--hub-daterangepicker-active-color | var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff)) | color | Daterangepicker active color |
--hub-daterangepicker-bg | var(--hub-sys-surface-page, #fff) | color | Daterangepicker bg |
--hub-daterangepicker-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Daterangepicker border color |
--hub-daterangepicker-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Daterangepicker border radius |
--hub-daterangepicker-box-shadow | var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)) | shadow | Daterangepicker box shadow |
--hub-daterangepicker-cell-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Daterangepicker cell border radius |
--hub-daterangepicker-cell-color | var(--hub-sys-text-primary, #212529) | color | Daterangepicker cell color |
--hub-daterangepicker-cell-hover-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Daterangepicker cell hover bg |
--hub-daterangepicker-cell-size | 2rem | length | Daterangepicker cell size |
--hub-daterangepicker-color | var(--hub-sys-text-primary, #212529) | color | Daterangepicker color |
--hub-daterangepicker-in-range-bg | color-mix(in oklch, var(--hub-sys-color-primary, #0d6efd) 14%, transparent) | color | In-range calendar day background. |
--hub-daterangepicker-nav-arrow-color | var(--hub-sys-text-muted, #6c757d) | color | Daterangepicker nav arrow color |
--hub-daterangepicker-nav-arrow-hover-color | var(--hub-sys-text-primary, #212529) | color | Daterangepicker nav arrow hover color |
--hub-daterangepicker-off-color | var(--hub-sys-text-muted, #6c757d) | color | Daterangepicker off color |
--hub-daterangepicker-preview-bg | color-mix(in oklch, var(--hub-daterangepicker-in-range-bg) 50%, transparent) | color | Background of the tentative range band, previewed while an end date is being chosen. |
Label
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-label-color | var(--hub-sys-text-primary, #212529) | color | Label color |
--hub-label-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Label font size |
--hub-label-font-weight | var(--hub-ref-font-weight-medium, 500) | number | Field label weight. |
--hub-label-margin-bottom | 0 | length | Label margin bottom |
Slider
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-slider-thumb-bg | var(--hub-sys-color-primary, #0d6efd) | color | Slider thumb color. |
--hub-slider-thumb-border | 2px solid var(--hub-sys-surface-page, #fff) | border | Slider thumb border |
--hub-slider-thumb-border-radius | 50% | length | Slider thumb border radius |
--hub-slider-thumb-height | 1.1rem | length | Slider thumb height |
--hub-slider-thumb-width | 1.1rem | length | Slider thumb width |
--hub-slider-tooltip-bg | var(--hub-sys-text-primary, #212529) | color | Slider tooltip bg |
--hub-slider-tooltip-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Slider tooltip border radius |
--hub-slider-tooltip-color | var(--hub-sys-surface-page, #fff) | color | Slider tooltip color |
--hub-slider-track-bg | var(--hub-sys-border-color-default, #dee2e6) | color | Slider track bg |
--hub-slider-track-border-radius | var(--hub-ref-radius-pill, 50rem) | length | Slider track border radius |
--hub-slider-track-height | 0.375rem | length | Slider track height |
--hub-slider-track-width | 100% | length | Slider track width |
--hub-slider-thumb-shadow | 0 0 0 1px var(--hub-sys-border-color-default, #dee2e6) | shadow | Slider thumb shadow ring |
--hub-slider-track-fill-bg | var(--hub-sys-color-primary, #0d6efd) | color | Filled portion of the slider track. |
--hub-slider-track-fill | linear-gradient(var(--hub-slider-track-fill-bg), var(--hub-slider-track-fill-bg)) | color | Gradient-capable fill background image for the slider track (clipped to the current percentage) |
--hub-slider-value-space | 0 | string | Vertical headroom above the rail for the value bubble; collapsed to 0 by the flush (labelless) modifier |
--hub-segmented-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Vertical padding of each segment (md) |
--hub-segmented-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal padding of each segment (md) |
--hub-segmented-gap | 0.25rem | length | Gap between segments and inner track padding |
--hub-segmented-radius | var(--hub-ref-radius-md, 0.375rem) | length | Corner radius of the hub-segmented track |
--hub-segmented-selected-color | var(--hub-sys-text-primary, #212529) | color | Selected segment text colour |
--hub-segmented-selected-bg | var(--hub-sys-surface-page, #fff) | color | Selected segment background |
--hub-segmented-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Track background of the hub-segmented bar |
--hub-segmented-indicator-transition | 0.2s ease | transition | Duration/easing of the single-mode sliding indicator as it moves between options |
Switch
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-switch-height | 1.25rem | length | Switch height |
--hub-switch-width | 2.25rem | length | Switch width |
--hub-switch-thumb | var(--hub-sys-surface-page, #fff) | string | Switch thumb color |
--hub-switch-track-off | var(--hub-sys-border-color-default, #dee2e6) | string | Switch off-state track color |
--hub-switch-track-on | var(--hub-sys-color-primary, #0d6efd) | color | Switch on-state track color |
OTP input
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-otp-cell-font-size | 1.25rem | length | OTP cell font size |
--hub-otp-cell-radius | var(--hub-input-border-radius) | length | OTP cell border radius |
--hub-otp-cell-size | 2.75rem | length | OTP cell size |
--hub-otp-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between OTP cells |
--hub-otp-separator-color | var(--hub-sys-text-muted, #6c757d) | color | OTP separator color |