ObjectDisplay

Display-definition parsing, tabbed property groups and click-to-edit values. The header shows icon, label, type and actions; each tab is a grid of properties whose values become Fields on click. LabeledObject and LabeledUser chips resolve labels automatically.

Every result resolves to an object. Clicking a result in any view of Search opens this block; only the presentation changes, and data-presentation is the axis that says which. A two-pane view (the Inbox, and Search’s own two-pane view) shows it in place in the right pane, data-presentation="pane", beside the list it was selected from. Every other view — table, cards, list, tree — opens it as an OS-style window: dialog.qf-overlay[data-window] inside the view’s [data-window-area], launched by [data-ds-open-window] and dragged, snapped and docked by the OverlaySystem window layer. In that presentation the window frame carries the object’s icon and title, so the block drops its own and keeps a compact meta strip; the secondary header actions collapse into an overflow menu and the body scrolls on its own inside the frame.

The specimen below is copied from object.html, which shows it inside the app shell, by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

Guidance

When to use

• Use it whenever a result resolves to an object and users need its header, actions and properties.
• Use data-presentation="pane" in the right pane of a two-pane view, such as the Inbox or Search two-pane.
• Use data-presentation="window" when the object opens from a table, list, gallery, kanban or tree as an OverlaySystem window.
• Use tabbed property groups when an object has more properties than fit one screen, such as Details, Assessment, Documents and Tasks.
• Use click-to-edit values when users mostly read properties and change one at a time.

When to consider something else

• Use the Form composite when users create a record or edit many fields at once. See Form.
• Use a Card for a short summary of an object in a grid or board. See Card.
• Use DocumentViewer when the object is a file and its content matters more than its properties. See DocumentViewer.
• Use the Inbox detail pane when the object is shown through the task being worked on it. See Inbox.

Usability

Accessibility

Keyboard

Roles and names

• Tabs use role="tablist", role="tab" with aria-selected and aria-controls, and role="tabpanel"; hidden panels carry hidden.
• Property values are <span class="qf-property__value" tabindex="0">; the binding must give each one role="button" and a name such as Edit Claimant, Jane Doe, or render a real button.
• Property labels and values should be related, for example as a <dl> or with aria-labelledby, so the label is read with the value.
• In pane presentation the object is an <article> labeled by its <h2 class="qf-object__label">, as in the Inbox; the binding should do the same in every presentation.
• The overflow button is icon-only with aria-label="More actions", aria-haspopup="menu" and aria-expanded.

Focus

• Entering edit mode moves focus into the Field; saving or cancelling returns focus to the value.
• In a window, focus starts on the window's first control; Escape closes the window and returns to the result that opened it.
• In a pane, selecting a new result does not move focus into the pane.

Other requirements

• The hover pencil (:hover::after) has no focus equivalent in the CSS; show it on :focus-visible too so keyboard users see the value is editable.
• Status values are chips with text, not color alone (1.4.1).
• The property grid must reflow to one column at 320 CSS pixels (1.4.10).
• Avatars show initials; the .qf-labeled__text beside them carries the full name (1.1.1).

Test your implementation too. This guidance covers the element as specified here. How a screen composes it (labels, order, announcements) still needs its own keyboard and screen reader check.

Accessibility tests

Passed the gate (run 358b316 on 2026-10-22): no finding in any theme. Awaiting a person’s approval of the checklist below.

Approving. When the checklist passes on the checked run, record it with bun run a11y:approve -- object --by "Your name" and commit a11y/approvals.json with the rebuilt pages. All test status

Package

Consumers link one stylesheet, css/classic/index.css, which includes every element. The files below are where this element is defined.

Latest updates

No recorded changes yet.

All release notes