Components

These examples cover the nine dedicated Zag adapters and Fuzor toolbar. The complete Zag catalogue lists all 51 integrated packages, their part tags, shared configuration and restoration status.

All examples below run inside this documentation page using its built-in deferred UI runtime. Each root has a unique identity; the same markup works in SPA, MPA, static and server delivery. Copy the HTML and start resumeUi(document) in an ordinary app.

Use native <button> and <input> parts where browser semantics are useful before activation. The fuzor-*-trigger and fuzor-*-content tags are also available after registration. Keep essential labels and descriptions in the precompiled HTML.

Tabs

value, orientation; value, setValue(value); ui:value-change with { value }. Arrow keys move between tabs.

<fuzor-tabs id="demo-tabs" data-fuzor-ui="tabs" value="html">
  <fuzor-tabs-list data-part="list" role="tablist" aria-label="Example language">
    <button type="button" data-part="trigger" value="html" role="tab" aria-selected="true">HTML</button>
    <button type="button" data-part="trigger" value="ts" role="tab" aria-selected="false" tabindex="-1">TypeScript</button>
  </fuzor-tabs-list>
  <fuzor-tabs-content data-part="content" value="html">Start with HTML.</fuzor-tabs-content>
  <fuzor-tabs-content data-part="content" value="ts" hidden>Add behavior where needed.</fuzor-tabs-content>
</fuzor-tabs>

Dialog

open; isOpen, open(), close(), setOpen(boolean); ui:open-change with { open }. Escape closes and returns focus; modal focus trapping and scroll locking reconnect after restoration.

<fuzor-dialog id="demo-dialog" data-fuzor-ui="dialog">
  <button type="button" data-part="trigger">Open example dialog</button>
  <fuzor-dialog-portal data-part="portal" hidden>
    <fuzor-dialog-overlay data-part="backdrop" hidden></fuzor-dialog-overlay>
    <fuzor-dialog-content data-part="content" hidden>
      <fuzor-dialog-title data-part="title">Example dialog</fuzor-dialog-title>
      <fuzor-dialog-description data-part="description">Focus stays in this modal until it closes.</fuzor-dialog-description>
      <button type="button" data-part="close-trigger">Close example dialog</button>
    </fuzor-dialog-content>
  </fuzor-dialog-portal>
</fuzor-dialog>

Menu

open; disclosure methods; ui:open-change and ui:select. Arrow keys, typeahead and Escape work. This adapter supports one menu; nested linked menu graphs are not exposed yet.

<fuzor-menu id="demo-menu" data-fuzor-ui="menu">
  <button type="button" data-part="trigger">Example actions</button>
  <fuzor-menu-content data-part="content" hidden>
    <button type="button" data-part="item" value="copy">Copy</button>
    <button type="button" data-part="item" value="archive">Archive</button>
  </fuzor-menu-content>
</fuzor-menu>

Accordion

value as comma-separated values, multiple, collapsible; value: string[], setValue(values); ui:value-change with { value }. Arrow keys move between item triggers.

<fuzor-accordion id="demo-accordion" data-fuzor-ui="accordion" collapsible>
  <fuzor-accordion-item data-part="item" value="precompile">
    <button type="button" data-part="trigger" aria-expanded="false">Is this HTML precompiled?</button>
    <fuzor-accordion-content data-part="content" hidden>Yes. Only the interaction behavior is deferred.</fuzor-accordion-content>
  </fuzor-accordion-item>
  <fuzor-accordion-item data-part="item" value="engine">
    <button type="button" data-part="trigger" aria-expanded="false">Can I use native HTML?</button>
    <fuzor-accordion-content data-part="content" hidden>Yes. The DOM engine is shared with the Web Component.</fuzor-accordion-content>
  </fuzor-accordion-item>
</fuzor-accordion>

Collapsible

open, disabled; disclosure methods and ui:open-change. Expanded state survives a checkpoint; native CSS animation progress is rebuilt.

<fuzor-collapsible id="demo-collapsible" data-fuzor-ui="collapsible">
  <button type="button" data-part="trigger" aria-expanded="false">Show implementation detail</button>
  <fuzor-collapsible-content data-part="content" hidden>The controller attaches to the existing DOM.</fuzor-collapsible-content>
</fuzor-collapsible>

Select

value, multiple, name, disabled, required, readonly, invalid, open; value, values, setValue(value); ui:value-change. Uses a native hidden select for forms, while the popup supplies keyboard navigation and typeahead.

<fuzor-select id="demo-select" data-fuzor-ui="select" value="html" name="language">
  <span data-part="label">Example language selector</span>
  <button type="button" data-part="trigger"><span data-part="value">HTML</span></button>
  <fuzor-select-content data-part="content" hidden>
    <fuzor-select-item data-part="item" value="html">HTML</fuzor-select-item>
    <fuzor-select-item data-part="item" value="ts">TypeScript</fuzor-select-item>
  </fuzor-select-content>
</fuzor-select>

Switch

checked, name, value, disabled, required, readonly; checked, defaultChecked, setChecked(boolean), toggle(), form/validity methods; ui:checked-change with { checked }. The Web Component uses ElementInternals when available and a native checkbox fallback otherwise.

<fuzor-switch id="demo-switch" data-fuzor-ui="switch" name="updates" aria-label="Receive updates">
  <label data-part="root">
    <span data-part="label">Receive updates</span>
    <span data-part="control"><span data-part="thumb"></span></span>
    <input type="checkbox" aria-label="Receive updates" />
  </label>
</fuzor-switch>

Popover

open, placement; disclosure methods and ui:open-change. This adapter positions content in place, closes on outside interaction or Escape, and restores focus. It is non-modal.

<fuzor-popover id="demo-popover" data-fuzor-ui="popover" placement="bottom">
  <button type="button" data-part="trigger">Show example popover</button>
  <fuzor-popover-positioner data-part="positioner">
    <fuzor-popover-content data-part="content" hidden>
      <fuzor-popover-title data-part="title">Useful detail</fuzor-popover-title>
      <fuzor-popover-description data-part="description">An anchored, non-modal surface.</fuzor-popover-description>
      <button type="button" data-part="close-trigger">Close example popover</button>
    </fuzor-popover-content>
  </fuzor-popover-positioner>
</fuzor-popover>

Tooltip

open, disabled, placement, open-delay, close-delay; disclosure methods and ui:open-change. Hover and keyboard focus open it; Escape closes it. Put interactive content in a popover instead.

<fuzor-tooltip id="demo-tooltip" data-fuzor-ui="tooltip" placement="top" open-delay="400" close-delay="150">
  <button type="button" data-part="trigger">Example hint</button>
  <fuzor-tooltip-positioner data-part="positioner">
    <fuzor-tooltip-content data-part="content" hidden>Hints supplement an accessible name.</fuzor-tooltip-content>
  </fuzor-tooltip-positioner>
</fuzor-tooltip>

Toolbar

value, orientation, dir; value, setValue(value); ui:value-change. Fuzor owns this native roving-focus engine. Arrow keys and Home/End move focus; it does not apply formatting for you.

<fuzor-toolbar id="demo-toolbar" data-fuzor-ui="toolbar" value="bold" aria-label="Example formatting tools">
  <button type="button" data-part="item" data-value="bold">Bold</button>
  <button type="button" data-part="item" data-value="italic">Italic</button>
  <button type="button" data-part="item" data-value="underline">Underline</button>
</fuzor-toolbar>

Static and layout components

These components do not run Zag machines. Register them through defineAll() or the corresponding per-component module when using them outside docs mode. CSS remains in the cascade so media queries can override defaults.

<fuzor-nav> and a bare empty <fuzor-toc></fuzor-toc> are compiler directives that compile to native navigation links. For the runtime table-of-contents Web Component, use <fuzor-toc target="#article"></fuzor-toc> or supply precompiled child links. The shipped docs shell places those links inside Fuzor tabs, collapsibles and popovers.