@gravionlabs/helix-ui: component reference

One page per component of @gravionlabs/helix-ui: usage, inputs and outputs, accessibility and tokens. Selectors use the hx- prefix. The overview, install, theming and rules are in HELIX-UI.

Buttons and actions (5)

Component	Description
Button	`button[hx-button]` and `a[hx-button]`: a native element styled as a Helix button.
Button group	`hx-button-group` joins the `hx-button`s inside it into one control: the inner corners are square and neighbouring borders overlap instead of doubling.
Split button	`hx-split-button` is a default action with a menu of related actions: a button and, joined to it, a button that opens an `hx-menu`.
Toggle button	`hx-toggle-button` is a two-state button with its own labels, the look of one Select button segment.
Select button	`hx-select-button` is a choice among a few options as a joined group of toggle buttons: native buttons with `aria-pressed` in a `role="group"`.

Form controls (16)

Component	Description
Form controls	`hx-input`, `hx-checkbox`, `hx-radio` and `hx-switch` are native elements drawn with CSS, not wrapper components: they work unchanged with template-driven forms, reactive forms and Angular's signal forms, keep the native keyboard and screen-reader behaviour, and need no `ControlValueAccessor`.
Float label	`hx-float-label` wraps one control and its `<label for>` (the label comes after the control).
Icon field	`hx-icon-field` puts an icon inside a text field.
Input group	`hx-input-group` joins a field with text or button addons into one control.
Input number	`hx-input-number` is a numeric field with locale formatting and optional step buttons.
Password	`hx-password` is a password field with an optional button that shows or hides the text.
Select	`hx-select` is a listbox in a CDK overlay with a combobox trigger.
Auto complete	`hx-auto-complete` is a text field that suggests values while the user types.
Multi select	`hx-multi-select` is a select for several values: a `combobox` that opens a multi-select listbox in an overlay.
Listbox	`hx-listbox` is an inline list of options, single or `multiple`, on the CDK listbox.
Date time range picker	`hx-date-time-range-picker` is a date-time range in one field: one calendar marks the range, a time row sets each end.
Date range quick select	`hx-date-range-quick-select` is a Kibana-style quick select for a date range: relative ranges as date math, commonly and recently used lists.
Date picker	`hx-date-picker` is a date field that opens a calendar, or with `[inline]="true"` the calendar alone, to choose a day, a range or several days.
Date time picker	`hx-date-time-picker` is a date and time field that opens a calendar with a time row, or with `[inline]="true"` both alone.
Time picker	`hx-time-picker` is a time field that opens a time row (hour, minute, second, AM/PM), or with `[inline]="true"` the row alone.
File upload	`hx-file-upload` collects files and emits them; there is no HTTP in it, the app uploads.
Rating	`hx-rating` is a star rating.
Slider	`hx-slider` chooses a number, or with `range` a pair, on a track.

Containers (6)

Component	Description
Card	`hx-card` is a surface for grouped content.
Panel	`hx-panel` is a titled container that can collapse.
Fieldset	`hx-fieldset` is a native `<fieldset>` with a `<legend>` that groups related controls and can collapse.
Accordion	`hx-accordion` stacks panels of which one (or with `multiple` several) is open.
Toolbar	`hx-toolbar` groups actions in a start, a center and an end area.
Divider	`hx-divider`: a line between content.

Overlays and messages (7)

Component	Description
Dialog	`hx-dialog` is a modal or non-modal dialog on `@angular/cdk/dialog`.
Drawer	`hx-drawer` is a panel that slides in from an edge of the screen.
Popover	`hx-popover` is a small panel anchored to an element, with arbitrary content and an arrow pointing at the element.
Confirm	`HxConfirmationService` asks the user to confirm an action.
Toast	`hx-toast` shows short messages that go away.
Message	`hx-message` is an inline message next to the content it is about.
Tooltip	`[hx-tooltip]` shows a short text next to an element on hover and keyboard focus.

Component	Description
Menu	`hx-menu` shows a list of `HxMenuItem`s, inline or as a popup, with nested submenus.
Menubar	`hx-menubar` is a horizontal menu of `HxMenuItem`s with dropdown submenus, on the CDK menubar.
Tabs	`hx-tabs` shows one panel at a time, chosen by a row of tabs, in the WAI-ARIA tabs pattern.
Stepper	`hx-stepper` shows the steps of a process as a row of headers above the panel of the active step.
Paginator	`hx-paginator` is the page navigation of a list or table: first, previous, page links, next, last and a rows-per-page select.
Breadcrumb	`hx-breadcrumb` renders the path to the current page as a `nav` landmark with an ordered list.

Display (7)

Component	Description
Avatar	`hx-avatar` shows a picture, an icon or initials for a person; `hx-avatar-group` overlaps several.
Badge	`hx-badge` is a small count or status marker; without a `value` it is a dot.
Chip	`hx-chip` is a compact element for an entity, optionally removable.
Tag	`hx-tag` is a label for a category or a status.
Progress	`hx-progress-bar` fills from 0 to 100 or slides while the duration is unknown; `hx-progress-spinner` is a spinning ring.
Skeleton	`hx-skeleton` is a placeholder shaped like the content that is still loading.
Timeline	`hx-timeline` shows events along a line, as an ordered list.

Media (3)

Component	Description
Galleria	`hx-galleria` is an image gallery: a stage, thumbnails, previous/next, captions and a full-screen mode.
Image	`hx-image` shows a picture and opens it in a modal preview with rotate and zoom.
Carousel	`hx-carousel` slides over a list of items, `numVisible` at a time, with buttons, indicators, arrow keys, autoplay and responsive counts.

Data (4)

Component	Description
Table	`table[hx-table]` draws a native `<table>` as a Helix table, with CSS only.
Data table	`hx-data-table` is a table with a column model: cell templates, sorting, paging (client side or lazy), selection, filters, row expansion, caption, empty and loading state, a scrolling body with a sticky header.
Tree	`hx-tree` shows hierarchical data with expand and collapse, selection, a filter and lazy children, in the WAI-ARIA tree view pattern.
Chart	`hx-chart` is a chart.js chart whose colours, grid and font come from the Helix tokens; import it from `@gravionlabs/helix-ui/chart`.