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, Combobox, Slider, RangeSlider, Toggle and ToggleGroup.

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.

Verified Angular, TypeScript, Node, browser, SSR and hydration support, and the limits of that evidence.

Install Quartz in an external Angular app, check SSR, hydration and accessibility, and keep an eye on bundle size.

What `quartz add` copies, where it puts it, and the guarantees it makes before touching your files.

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.

A modal panel anchored to a viewport edge, built on Dialog: physical and writing-direction-aware sides, focus management, inert background, scroll lock and an exit-presence lifecycle for CSS transitions.

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

Resizable panels on the Core Splitter: a keyboard- and pointer-operable separator with ARIA values, clamping, RTL mirroring and observable resizing state.

Transient application feedback that does not interrupt the page.

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.

Accessible progressbar semantics for work moving toward completion.

Accessible scalar measurement within a meaningful range.

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

Image loading and consumer supplied fallback behavior.

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 button-based pressed/unpressed toggle with aria-pressed, a user-only committed output and an Angular Forms adapter.

A group of toggle buttons with single or multiple selection, explicit allowDeselection, Collection-powered roving focus, RTL-aware keys, a user-only committed output and an Angular Forms adapter.

A single-thumb headless slider: deterministic decimal stepping, WAI-ARIA keyboard, Pointer Events with capture, RTL and vertical geometry, a user-only committed output and an Angular Forms adapter.

A headless action toolbar with roving focus, orientation and direction aware keyboard navigation.

Site navigation links with one responsive, keyboard accessible flyout panel.

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.

Bounded page navigation with current-page semantics and boundary focus recovery.

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

A two-thumb headless range slider with coordinated low/high state, non-crossing thumbs, minimum distance, nearest-thumb track press, RTL and vertical geometry, and an Angular Forms adapter with a { low, high } value.

A headless inline calendar for a single local civil date, with keyboard navigation, locale-aware names and Angular Forms support.

A headless inline calendar for local civil date ranges, including partial selection, preview, RTL keyboard behavior and Angular Forms.

Compose native and Quartz controls with stable labels, descriptions, errors and optional Angular Forms state.

A headless one-time-code input with one focusable text field and presentational slots.

Best-effort browser autofill transition detection for native text inputs.

Native file-picker and file-drop filtering behavior without a hosted upload service.

Compose search from native input, Angular Forms and button behavior.

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.

Additive changes in 0.11 (RangeSlider, Forms adapters for Slider/Toggle/ToggleGroup, allowDeselection) and the few behaviours to check.

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

88 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].

The draggable/keyboard separator between two panels.

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.

Application-scoped generator for DOM ids.

Service reference for SplitterService.

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

Mirrors arrow geometry onto a surface element so consumers can style an arrow in plain CSS: data-side, data-placement and --qz-arrow-x/--qz-arrow-y (px; remove…

Computes the arrow position for a surface already positioned at surface.

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.

Function reference for placementSide.

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.

Geometry for a consumer-rendered arrow.

Interface reference for OverlayArrowOptions.

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 side of a rectangle.

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.

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

Headless avatar image with a delayed, consumer supplied text fallback.

Component reference for InputOtpComponent with the selector qz-input-otp.

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].

Detects supported browser autofill CSS animation transitions; this is best-effort.

Gridcell semantics and state hooks for one CalendarDay.

Roving-focus native date button with APG keyboard behavior and date semantics.

Adds grid semantics and a live month label to a consumer-owned calendar grid.

Month heading text that announces navigation without introducing a second live region.

Directive reference for CalendarNextMonthDirective with the selector button[qzCalendarNextMonth].

Directive reference for CalendarPreviousMonthDirective with the selector button[qzCalendarPreviousMonth].

Directive reference for CalendarRowDirective with the selector [qzCalendarRow].

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].

Inline single-date calendar behavior.

Inline range calendar.

Adds keyboard friendly dropzone behavior around a native qzFileUpload input.

Adds filtering and drag/drop selection events to a native file input.

Apply to a native input/textarea/select or a compatible Quartz control host.

Directive reference for FormFieldDescriptionDirective with the selector [qzFormFieldDescription].

Accessible relationships for one field.

Directive reference for FormFieldErrorDirective with the selector [qzFormFieldError].

Use a native label for native controls; use this on a span for button-like controls.

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].

A named group of menu items: role="group" labelled by its MenuLabelDirective.

Directive reference for MenuItemDirective with the selector [qzMenuItem].

Visible heading of a MenuGroupDirective or qzMenuRadioGroup.

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].

Accessible meter for a scalar measurement with a known meaningful range.

Directive reference for MeterIndicatorDirective with the selector [qzMeterIndicator].

Directive reference for MeterTrackDirective with the selector [qzMeterTrack].

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 NavigationMenuContentDirective with the selector ng-template[qzNavigationMenuContent].

Directive reference for NavigationMenuDirective with the selector [qzNavigationMenu].

Directive reference for NavigationMenuItemDirective with the selector [qzNavigationMenuItem].

Directive reference for NavigationMenuLinkDirective with the selector [qzNavigationMenuLink].

Directive reference for NavigationMenuListDirective with the selector [qzNavigationMenuList].

Directive reference for NavigationMenuTriggerDirective with the selector button[qzNavigationMenuTrigger].

Directive reference for PaginationDirective with the selector [qzPagination].

Directive reference for PaginationFirstDirective with the selector button[qzPaginationFirst].

Directive reference for PaginationLastDirective with the selector button[qzPaginationLast].

Directive reference for PaginationNextDirective with the selector button[qzPaginationNext].

Directive reference for PaginationPageDirective with the selector button[qzPaginationPage].

Directive reference for PaginationPreviousDirective with the selector button[qzPaginationPrevious].

Directive reference for PopoverDirective with the selector [qzPopover].

Directive reference for PopoverTriggerDirective with the selector [qzPopoverTrigger].

Accessible progress root.

Directive reference for ProgressIndicatorDirective with the selector [qzProgressIndicator].

Directive reference for ProgressTrackDirective with the selector [qzProgressTrack].

Directive reference for RadioDirective with the selector [qzRadio].

Directive reference for RadioGroupDirective with the selector [qzRadioGroup].

Two-thumb slider root.

The selected span between the thumbs.

One thumb of a qzRangeSlider: qzRangeSliderThumb="low" or qzRangeSliderThumb="high".

Directive reference for RangeSliderTrackDirective with the selector [qzRangeSliderTrack].

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].

Single-thumb slider root.

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].

Directive reference for ToolbarDirective with the selector [qzToolbar].

Directive reference for ToolbarItemDirective with the selector [qzToolbarItem].

Headless tooltip directive.

Service reference for DialogService.

A side-anchored modal.

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.

Resolves a (possibly logical) side to the physical edge for direction.

Class reference for DialogRef.

Interface reference for AccordionConfig.

Interface reference for CalendarDay.

Interface reference for ComboboxConfig.

Interface reference for DatePickerConfig.

An incomplete or complete calendar date range.

Interface reference for DialogConfig.

Interface reference for DrawerConfig.

Interface reference for InputOtpSlot.

Interface reference for LatestRequest.

Interface reference for ListboxConfig.

Interface reference for MenuCollectionEntry.

Interface reference for MenuConfig.

Interface reference for NavbarConfig.

Interface reference for NavigationMenuConfig.

Interface reference for PaginationConfig.

Interface reference for PopoverConfig.

Template context of the popover content (let-arrow="arrow" let-placement="placement" let-open="open").

Interface reference for RadioGroupConfig.

Interface reference for RangeSliderConfig.

Canonical range value (also the Angular Forms value): low <= high, both within min..max.

Interface reference for RejectedFile.

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 ToastAction.

Interface reference for ToastContentComponent.

Interface reference for ToastContentContext.

Interface reference for ToastOptions.

Interface reference for ToastTemplateContext.

Interface reference for ToggleGroupConfig.

Interface reference for ToolbarConfig.

Interface reference for TooltipConfig.

Template context of a TemplateRef tooltip (let-arrow="arrow" let-placement="placement").

Interface reference for TreeConfig.

Interface reference for TreeNode.

Interface reference for TreeNodeContext.

Type alias reference for AccordionOrientation.

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 DateDisabled.

Type alias reference for DialogPosition.

Lifecycle of a dialog panel, mirrored on the panel as data-state for consumer CSS: opening (mounted, enter styles) → open → closing (exit transition running, o…

Physical edge a DrawerSide resolved to.

Edge a drawer is anchored to.

Type alias reference for ListboxOrientation.

Type alias reference for NavbarBreakpoint.

Type alias reference for NavbarRevealMode.

Type alias reference for NavbarScrollDirection.

Type alias reference for NavigationMenuOrientation.

Type alias reference for RadioGroupOrientation.

Type alias reference for RangeSliderOrientation.

Type alias reference for RangeSliderThumbName.

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 ToolbarOrientation.

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_DATE_PICKER_CONFIG.

Constant reference for DEFAULT_DIALOG_CONFIG.

Constant reference for DEFAULT_DRAWER_CONFIG.

Constant reference for DEFAULT_LISTBOX_CONFIG.

Constant reference for DEFAULT_MENU_CONFIG.

Constant reference for DEFAULT_NAVBAR_CONFIG.

Constant reference for DEFAULT_NAVIGATION_MENU_CONFIG.

Constant reference for DEFAULT_PAGINATION_CONFIG.

Constant reference for DEFAULT_POPOVER_CONFIG.

Constant reference for DEFAULT_RADIO_GROUP_CONFIG.

Constant reference for DEFAULT_RANGE_SLIDER_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_TOOLBAR_CONFIG.

Constant reference for DEFAULT_TOOLTIP_CONFIG.

Constant reference for DEFAULT_TREE_CONFIG.

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

Angular Forms adapter for button[qzCheckbox].

Angular Forms adapter for [qzCombobox].

Forms adapter for [qzDatePicker]; values are Date | null local civil dates.

Forms adapter for [qzDateRangePicker]; partial values use { start, end: null }.

Mirrors Angular Forms state into a structural FormField without acting as a value accessor.

Angular Forms adapter for qz-input-otp; value is a string and reset writes an empty string.

Angular Forms adapter for [qzListbox].

Angular Forms adapter for [qzRadioGroup].

Angular Forms adapter for [qzRangeSlider].

Angular Forms adapter for [qzSelect].

Angular Forms adapter for [qzSlider].

Angular Forms adapter for button[qzSwitch].

Angular Forms adapter for button[qzToggle].

Angular Forms adapter for [qzToggleGroup].

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