Quartz Headless documentation

Install Quartz Headless from npm, or copy the source into your project with the CLI.

A working accessible Select in a few lines, then where to go next.

What lives in each package, how they depend on each other and which one to import.

Two-way model bindings, committed outputs and how selected value, active item and displayed label stay separate.

Opt-in ControlValueAccessor directives for Checkbox, Switch, RadioGroup, Select, Listbox and Combobox.

Quartz ships no CSS. Style from data-qz-* attributes and ARIA state.

The ARIA patterns, keyboard behaviour and focus rules Quartz implements, and what is not verified.

What runs on the server, what is deferred to the browser and how primitives clean up.

A registration store with DOM-order items, an active item, roving or active-descendant focus and typeahead — the engine under Select, Listbox, Combobox, Menu, Tabs and Tree.

The documentation is Markdown rendered by Doqs; live examples are real Quartz components, and code shown here is read from the source.

Focusable queries, a focus trap and a safe focus restorer.

One layered controller for Escape, outside pointer, focus-outside and scroll dismissal.

Portal-based positioning system with smart auto-flip, click-outside handling, and scroll management. Build dropdowns, popovers, and menus with full control.

Resolves LTR/RTL once, then exposes it as a signal plus small, widget-agnostic helpers — logical inline-start/end and the arrow key each one maps to — so Core foundations (and anything built on them) don't each bake in their own left/right assumption.

A small Document-scoped foundation for locking body scroll across nested dialogs, drawers and floating workflows.

Resizable panel system with keyboard navigation, touch support, and flexible constraints. Perfect for IDE-style layouts and dashboards.

Sortable lists, between-container transfers, and drop zones — built on the native HTML5 DnD API with keyboard and touch support.

Efficiently render massive lists by only mounting DOM nodes that are visible in the viewport. Fully headless — you control the markup and styling.

Reactive viewport dimensions and breakpoint matching powered by Angular signals. No RxJS, no subscriptions — just signals that update automatically.

Portal-based dialog system with backdrop, scroll lock, keyboard handling, and 5 positioning modes. Build modal dialogs and side drawers with complete layout control.

Accessible, hover/focus tooltip with configurable placement, delays, and rich templates. Built on the same overlay engine as dialogs and menus.

Notification system with multiple positions, durations, and action support. Keep users informed without interrupting their workflow.

A non-modal floating surface for interactive content. It composes Overlay dismissal and positioning without trapping focus or forcing dialog semantics.

Accessible dropdown menus with roving tabindex, type-ahead, nested submenus, checkable items, radio groups, RTL-aware submenu keys and outside dismissal.

A button-triggered select (single or multiple, with groups) that renders a WAI-ARIA listbox popup with Quartz-owned keyboard, dismissal and positioning.

A headless WAI-ARIA listbox for single and multiple selection. Quartz owns keyboard behaviour; your design system owns every visual detail.

An editable WAI-ARIA combobox with input-owned focus, active-descendant suggestions, filtering and Overlay positioning.

A WAI-ARIA tabs primitive with roving focus, automatic or manual activation, orientation support and RTL-aware horizontal navigation.

Disclosure sections with single, collapsible or multiple open state, accessible trigger/panel relationships and optional header arrow navigation.

A compact button-based ARIA switch for boolean state. Use it where the change takes effect immediately.

A headless ARIA checkbox for button-based boolean or mixed state. It owns semantics and state hooks, never checkmarks or visuals.

A standalone radio group with Collection-powered registration, roving focus, disabled skipping, orientation and RTL.

A pressed/unpressed button primitive. Use it for stateful buttons, not on/off settings where Switch is the clearer semantic.

A group of toggle buttons with single or multiple selection, Collection-powered roving focus and RTL-aware horizontal keys.

A single-thumb headless slider with normalization, keyboard support, Pointer Events, RTL mapping and geometry CSS variables.

Headless tree component with expandable nodes, selection support, and full template customization. Perfect for file explorers, navigation menus, and nested lists.

Application navigation sidebar behaviour for push and overlay layouts, collapsed state, responsive mode switching and logical inline sides.

Headless navbar behaviour for sticky state, scrolled/stuck hooks, scroll direction, reveal state and responsive mobile menu control.

Sequential flow primitive with controlled value, linear navigation, completed/disabled state, orientation and RTL-aware keyboard focus.

Published packages, entry points, peer dependencies and the lockstep version policy.

Additive changes in 0.10 (multiple Select, groups, Combobox contract) and the few behaviours to check.

Button-first controls, the committed Switch output, Tooltip interactivity and the Tree template context.

81 public symbols generated from the TypeScript declarations of the library.

Wraps native HTML5 Drag and Drop (dragstart/dragend/dragenter/dragleave/dragover/ drop).

Directive reference for DropZoneDirective with the selector [qzDropZone].

Mark a <ng-template inside your component as the overlay content.

Directive reference for SplitterContainerDirective with the selector [qzSplitterContainer].

Directive reference for SplitterHandleDirective with the selector [qzSplitterHandle].

Directive reference for SplitterPanelDirective with the selector [qzSplitterPanel].

Structural/behavioral directive that exposes viewport breakpoint signals and applies CSS classes based on the default breakpoints.

Virtual scroll directive that calculates which items should be rendered based on the viewport size and scroll position.

Root-level reactive source of truth for the document's text direction.

Service reference for DragDropService.

Service reference for OverlayService.

Service reference for SplitterService.

Root-level service that tracks viewport dimensions and media-query matches using reactive signals.

Function reference for calculatePosition.

Function reference for compareDomOrder.

Function reference for createDismissController.

Captures the currently focused element and returns a restorer for it.

Function reference for createFocusTrap.

Function reference for createScrollLock.

Function reference for findByTypeahead.

Next/previous enabled item relative to activeId.

Function reference for firstItem.

Function reference for focusInitialElement.

Function reference for focusSafely.

Function reference for getElement.

Function reference for getFocusableElements.

Function reference for getLabel.

Function reference for getScrollParents.

The arrow key that moves toward inline-end (the reading direction's end) for direction.

The arrow key that moves toward inline-start (the reading direction's beginning) for direction.

Converts a logical inline position to the physical side it renders on for direction.

Function reference for isDisabled.

Whether element can receive programmatic focus (element.focus()) right now.

Function reference for lastItem.

The other direction.

Converts a physical side back to the logical inline position it represents for direction.

Resolves the effective direction for an element by walking up to the nearest ancestor (including itself) that carries a dir attribute — the same resolution <ht…

Classifies a keyboard event's key as an inline-start/inline-end move for direction, or null when it's not a horizontal arrow key at all.

Function reference for sortByDomOrder.

Class reference for CollectionStore.

Class reference for OverlayRef.

Interface reference for CollectionConfig.

Interface reference for CollectionItem.

Interface reference for CollectionNavigationResult.

Interface reference for DismissConfig.

Interface reference for DismissController.

Interface reference for DragDropConfig.

Interface reference for DropZoneConfig.

Interface reference for FocusRestorer.

Interface reference for FocusTrap.

Interface reference for OverlayConfig.

Interface reference for OverlayPosition.

Interface reference for OverlayVirtualAnchor.

Interface reference for QzDragEndInfo.

Interface reference for QzDragInfo.

Interface reference for QzDragOverInfo.

Interface reference for QzDropInfo.

Interface reference for ScrollLock.

Interface reference for SplitterConfig.

Interface reference for SplitterState.

Map of breakpoint names to pixel widths.

Result of matching all predefined breakpoints.

Configuration object for virtual scroll.

Represents a single visible row in the virtual viewport.

Type alias reference for CollectionFocusStrategy.

Type alias reference for CollectionOrientation.

Text/layout direction.

Type alias reference for DismissReason.

The two arrow keys that move along the horizontal/inline axis.

A logical position along the inline (reading) axis.

Type alias reference for OverlayAnchor.

Type alias reference for OverlayFlipAxis.

Type alias reference for OverlayPlacement.

A physical horizontal side.

Type alias reference for SplitterOrientation.

Predefined breakpoint names used by the ViewportService.

Default breakpoints following Tailwind conventions.

Constant reference for DEFAULT_COLLECTION_CONFIG.

Constant reference for DEFAULT_OVERLAY_CONFIG.

Constant reference for DEFAULT_SPLITTER_CONFIG.

Constant reference for FOCUSABLE_SELECTOR.

149 public symbols generated from the TypeScript declarations of the library.

Component reference for ToastComponent with the selector qz-toast.

Component reference for ToastContainerComponent with the selector qz-toast-container.

Component reference for TreeComponent with the selector qz-tree.

Quartz owns the accessible row — role="treeitem", roving tabindex, every aria- attribute, and click/keydown/focus handling all live on this component's own hos…

Directive reference for AccordionDirective with the selector [qzAccordion].

Directive reference for AccordionItemDirective with the selector [qzAccordionItem].

Directive reference for AccordionPanelDirective with the selector [qzAccordionPanel].

Directive reference for AccordionTriggerDirective with the selector [qzAccordionTrigger].

Directive reference for CheckboxDirective with the selector button[qzCheckbox].

Directive reference for ComboboxContentDirective with the selector ng-template[qzComboboxContent].

Directive reference for ComboboxDirective with the selector [qzCombobox].

Labelled group of options: role="group" named by a qzComboboxGroupLabel child.

Visible label of a qzComboboxGroup.

Directive reference for ComboboxInputDirective with the selector input[qzComboboxInput].

Directive reference for ComboboxListboxDirective with the selector [qzComboboxListbox].

Directive reference for ComboboxOptionDirective with the selector [qzComboboxOption].

Decorative separator between options or groups; excluded from navigation.

Directive reference for ComboboxTriggerDirective with the selector [qzComboboxTrigger].

Directive reference for ListboxDirective with the selector [qzListbox].

Labelled group of options: role="group" named by a qzListboxGroupLabel child.

Visible label of a qzListboxGroup.

Directive reference for ListboxOptionDirective with the selector [qzListboxOption].

Decorative separator between options or groups; excluded from navigation.

Directive reference for MenuCheckboxItemDirective with the selector [qzMenuCheckboxItem].

Directive reference for MenuDirective with the selector [qzMenu].

Directive reference for MenuItemDirective with the selector [qzMenuItem].

Directive reference for MenuRadioGroupDirective with the selector [qzMenuRadioGroup].

Directive reference for MenuRadioItemDirective with the selector [qzMenuRadioItem].

Directive reference for MenuSeparatorDirective with the selector [qzMenuSeparator].

Directive reference for MenuTriggerDirective with the selector [qzMenuTrigger].

Directive reference for NavbarDirective with the selector [qzNavbar].

Directive reference for NavbarMenuDirective with the selector [qzNavbarMenu].

Directive reference for NavbarTriggerDirective with the selector [qzNavbarTrigger].

Directive reference for PopoverDirective with the selector [qzPopover].

Directive reference for PopoverTriggerDirective with the selector [qzPopoverTrigger].

Directive reference for RadioDirective with the selector [qzRadio].

Directive reference for RadioGroupDirective with the selector [qzRadioGroup].

Directive reference for SelectContentDirective with the selector ng-template[qzSelectContent].

Directive reference for SelectDirective with the selector [qzSelect].

Labelled group of options: role="group" named by a qzSelectGroupLabel child.

Visible label of a qzSelectGroup.

Directive reference for SelectListboxDirective with the selector [qzSelectListbox].

Directive reference for SelectOptionDirective with the selector [qzSelectOption].

Decorative separator between options or groups; excluded from navigation.

Directive reference for SelectTriggerDirective with the selector [qzSelectTrigger].

Directive reference for SidebarContentDirective with the selector [qzSidebarContent].

Directive reference for SidebarDirective with the selector [qzSidebar].

Directive reference for SidebarPanelDirective with the selector [qzSidebarPanel].

Directive reference for SidebarTriggerDirective with the selector [qzSidebarTrigger].

Directive reference for SliderDirective with the selector [qzSlider].

Directive reference for SliderRangeDirective with the selector [qzSliderRange].

Directive reference for SliderThumbDirective with the selector [qzSliderThumb].

Directive reference for SliderTrackDirective with the selector [qzSliderTrack].

Directive reference for StepDirective with the selector [qzStep].

Directive reference for StepPanelDirective with the selector [qzStepPanel].

Directive reference for StepTriggerDirective with the selector [qzStepTrigger].

Directive reference for StepperDirective with the selector [qzStepper].

Directive reference for StepperNextDirective with the selector [qzStepperNext].

Directive reference for StepperPreviousDirective with the selector [qzStepperPrevious].

Directive reference for SwitchDirective with the selector button[qzSwitch].

Directive reference for TabDirective with the selector [qzTab].

Directive reference for TabListDirective with the selector [qzTabList].

Directive reference for TabPanelDirective with the selector [qzTabPanel].

Directive reference for TabsDirective with the selector [qzTabs].

Directive reference for ToggleDirective with the selector button[qzToggle].

Directive reference for ToggleGroupDirective with the selector [qzToggleGroup].

Directive reference for ToggleItemDirective with the selector button[qzToggleItem].

Headless tooltip directive.

Service reference for DialogService.

Container-scoped registry and active-descendant state for qzListbox.

Service reference for MenuService.

Service reference for ToastService.

Service reference for TooltipService.

Service reference for TreeService.

Stale-response guard for consumer-owned searches.

Class reference for DialogRef.

Interface reference for AccordionConfig.

Interface reference for ComboboxConfig.

Interface reference for DialogConfig.

Interface reference for LatestRequest.

Interface reference for ListboxConfig.

Interface reference for MenuCollectionEntry.

Interface reference for MenuConfig.

Interface reference for NavbarConfig.

Interface reference for PopoverConfig.

Interface reference for RadioGroupConfig.

Interface reference for SelectConfig.

Interface reference for SidebarConfig.

Interface reference for SliderConfig.

Interface reference for StepperConfig.

Interface reference for TabsConfig.

Interface reference for Toast.

Interface reference for ToastOptions.

Interface reference for ToggleGroupConfig.

Interface reference for TooltipConfig.

Interface reference for TreeConfig.

Interface reference for TreeNode.

Interface reference for TreeNodeContext.

Type alias reference for AccordionType.

Type alias reference for CheckboxState.

Type alias reference for ComboboxAutocomplete.

Type alias reference for ComboboxCloseReason.

Type alias reference for ComboboxCompareWith.

Type alias reference for ComboboxDisplayWith.

Type alias reference for ComboboxFilter.

Type alias reference for ComboboxOpenReason.

Type alias reference for DialogPosition.

Type alias reference for ListboxOrientation.

Type alias reference for NavbarBreakpoint.

Type alias reference for NavbarRevealMode.

Type alias reference for NavbarScrollDirection.

Type alias reference for RadioGroupOrientation.

Type alias reference for SelectCloseReason.

Type alias reference for SelectOpenReason.

Type alias reference for SidebarBreakpoint.

Type alias reference for SidebarFocusMode.

Type alias reference for SidebarMode.

Type alias reference for SidebarSide.

Type alias reference for SidebarState.

Type alias reference for SliderOrientation.

Type alias reference for StepState.

Type alias reference for StepperActivationMode.

Type alias reference for StepperOrientation.

Type alias reference for TabsActivationMode.

Type alias reference for TabsOrientation.

Type alias reference for ToastPosition.

Type alias reference for ToastType.

Type alias reference for ToggleGroupOrientation.

Type alias reference for ToggleGroupType.

Type alias reference for TooltipPlacement.

Resolves the children of node.

Lifecycle of a node's lazily-loaded children.

Constant reference for DEFAULT_ACCORDION_CONFIG.

Constant reference for DEFAULT_COMBOBOX_CONFIG.

Constant reference for DEFAULT_DIALOG_CONFIG.

Constant reference for DEFAULT_LISTBOX_CONFIG.

Constant reference for DEFAULT_MENU_CONFIG.

Constant reference for DEFAULT_NAVBAR_CONFIG.

Constant reference for DEFAULT_POPOVER_CONFIG.

Constant reference for DEFAULT_RADIO_GROUP_CONFIG.

Constant reference for DEFAULT_SELECT_CONFIG.

Constant reference for DEFAULT_SIDEBAR_CONFIG.

Constant reference for DEFAULT_SLIDER_CONFIG.

Constant reference for DEFAULT_STEPPER_CONFIG.

Constant reference for DEFAULT_TABS_CONFIG.

Constant reference for DEFAULT_TOAST_OPTIONS.

Constant reference for DEFAULT_TOGGLE_GROUP_CONFIG.

Constant reference for DEFAULT_TOOLTIP_CONFIG.

Constant reference for DEFAULT_TREE_CONFIG.

7 public symbols generated from the TypeScript declarations of the library.

Angular Forms adapter for button[qzCheckbox].

Angular Forms adapter for [qzCombobox].

Angular Forms adapter for [qzListbox].

Angular Forms adapter for [qzRadioGroup].

Angular Forms adapter for [qzSelect].

Angular Forms adapter for button[qzSwitch].

Import this in a standalone component's imports to enable Forms on every Quartz control.