All elements

78 elements

• Box P-01

  Primitives · Primitives

  The layout host: every rectangle in the app. Absorbs the two thirds of inline styles that are pure layout. A Box has no color of its own.

• Text P-02

  Primitives · Primitives

  All typography, headings included. No attributes gives sm / regular / ink. Layout-only styling (overflow, whitespace) is the only thing that goes in style.

• Icon P-03

  Primitives · Primitives

  One SVG glyph from the sprite. Strictly non-interactive (pointer-events: none): wrap it in a Pressable or Button to make it clickable. Default 20px, 24px on mobile. Never size the inner glyph; size the wrapper.

• Surface P-04

  Primitives · Primitives

  A bounded visual container: background, border, radius, elevation and the shared hover/selected pattern that cards, list rows and kanban cards all use.

• Pressable P-05

  Primitives · Primitives

  The single interaction target: focus ring, keyboard activation, hover/press/selected state, disabled semantics. Button, Chip, Tab, Menu.Item and list rows are all Pressables. Use a real <button> or <a>.

• Layer P-06

  Primitives · Primitives

  Overlay positioning, scrim, focus containment and dismissal: the one primitive behind every floating surface. In static HTML the platform provides most of it: <dialog> for modal/drawer, popover for popover/menu/tooltip. The class exists for hosts that need manual stacking.

• Transition P-07

  Primitives · Primitives

  Enter/exit presets driven by data-state, plus keyframe classes for elements that mount already open. Honors prefers-reduced-motion globally.

• ScrollArea P-08

  Primitives · Primitives

  A scroll container whose edge shadows appear only when there is more content in that direction. Pure CSS: the shadows are background layers with background-attachment: local, so no scroll listener is needed. Replaces ScrollShadows.

• Divider P-09

  Primitives · Primitives

  Separate groups of content in a panel, menu or form with a horizontal rule.

• Skeleton P-10

  Primitives · Primitives

  Hold the place of list rows, cards or table cells while their data loads.

• Control P-13

  Primitives · Primitives

  The bare focusable form element with no chrome. Field (C-09) supplies the label, border and helper shell; Control is the <input>, <textarea> or <select> inside it. Shown here without a Field to make the point.

• Behavioral primitives P-11 · P-12 · P-14 · P-15–P-20

  Primitives

  These own behavior, not pixels. Their visual output is whatever the consuming component renders; the contract below is what the static layer already provides for them. P-15 to P-20 serve the QEditor office surfaces (office mockups); their demo behavior lives in js/office.js.

• Button C-01

  Components · Actions

  The one clickable action affordance, icon buttons included. Built from Pressable + Surface + Text + Icon.

• ButtonGroup C-02

  Components · Actions

  Use a button group to show two to five related buttons as one set, such as Day, Week, Month.

• Chip C-03

  Components · Actions

  Use a chip to show a short status, type or tag on a record, such as Approved or Finance.

• Avatar C-04

  Components · Actions

  Use an avatar to show who owns, created or is assigned to a record.

• Tooltip C-05

  Components · Overlays

  Hover/focus description with a 300ms enter delay. Lives in a Layer[kind=tooltip]; the static host shown here is CSS-only.

• Popover C-06

  Components · Overlays

  Anchored floating surface with arbitrary content. Uses the native popover attribute for light-dismiss; only one InfoPopover is open at a time.

• Menu C-07

  Components · Overlays

  Search results carry one menu per result type: the items GWT's ActionRenderer shows for that type, grouped Open · Share · Sign · Related · Versions · Manage, with Delete last. Items the user can never have are hidden; items blocked for now (checked out by someone else) stay, disabled, with the reason in their tooltip.

• Overlay C-08

  Components · Overlays

  Every large dismissible surface: modal, drawer, inline panel, full page. A native <dialog> supplies the scrim and focus trap. The header carries the chrome tokens, so it goes navy.

• Confirmation C-29

  Components · Overlays

  Confirm-before-act in three presentations: dialog (Overlay sm), popover, and button (a button that opens either). Never a raw dialog.

• Field C-09

  Components · Inputs

  The control shell: label, helper/error text, adornments, sizing. Every input-like component (TextField, Select, DatePicker, InputFieldMapper) is a Field around a Control.

• TextField C-10

  Components · Inputs

  All twelve free-text variants are a type on the Control plus an optional adornment. Nothing else changes.

• Toggle C-11

  Components · Inputs

  Binary or tri-state choice as checkbox, switch or radio. The native input stays in the DOM (visually hidden) so forms and assistive tech work unchanged.

• Select C-12

  Components · Inputs

  Every option-picking control: plain select, combobox, async suggest, multi-select. The trigger is a Field control; the listbox is a Menu. Gated on useCombobox (P-14) for behavior; the visual contract is complete here.

• DatePicker C-13

  Components · Inputs

  Use a date picker for a date the user may want to see in calendar context, such as a due date.

• MemorableDate C-48

  Components · Inputs

  A date the user already knows, such as a date of birth or the day a benefit started, typed into Month, Day and Year instead of picked from a calendar (USWDS Memorable date). A fieldset and legend around three Fields; for a date the user has to look up or choose, use DatePicker.

• Dropzone C-26

  Components · Inputs

  Use a dropzone where users upload files into a record, such as attaching documents to a case.

• IconPicker C-46

  Components · Inputs

  Choose a sprite icon and its color, as for a saved search's sidebar row (Change icon… on its row menu, in a dialog titled "Icon for <name>"): a search field, the color keys as a ColorPicker row, a label naming the chosen icon, then the sprite's icons as a scrolling, keyboard-navigable grid. The chosen icon is drawn in the chosen color.

• Validation C-53

  Components · Inputs

  A live checklist of what a Field's value must meet, such as a new password's rules, ticked off as the user types (USWDS Validation). Each requirement says in text whether it is met; one polite live region reports the count after the user pauses, never per keystroke. The input names the checklist in aria-describedby.

• Tabs C-14

  Components · Navigation

  The stepper is no longer a Tabs variant: a fixed, ordered process is shown with StepIndicator (C-47), which marks the current step with aria-current="step" and says in text which steps are complete.

• Accordion C-15

  Components · Navigation

  Native <details>/<summary>. Exclusive open uses the name attribute.

• Toolbar C-23

  Components · Navigation

  Put the commands for one list, table or document in a bar above it: create, filter, view switch, refresh.

• Pagination C-24

  Components · Navigation

  Page through a large result set in a table or list when users need to jump to a known page or report "page 4".

• Tree C-25

  Components · Navigation

  Browse a folder or category hierarchy, such as Finance > Invoices > 2026 Q3, and pick one node to filter the content beside it.

• Breadcrumb C-49

  Components · Navigation

  The path from the app's root to the current page, above the page title (USWDS Breadcrumb). Each level is a link but the last, which is the page itself. The shell's content header (.qf-page-header, App shell) puts it above the title; it was styled there and is cataloged here.

• SideNavigation C-50

  Components · Navigation

  The app's rail of destinations, with nested levels the user opens and closes (USWDS Side navigation). The App shell places it in its nav column and adds the tree extensions (groups, row menus, organize mode); here it stands alone, as it would in a settings area or a help center. The site's own Contents rail is one too.

• StepIndicator C-47

  Components · Navigation

  Where the user is in a fixed, ordered process, such as a multi-page application form: one segment per step, and a "Step 2 of 5" heading naming the current one. Modeled on the USWDS Step indicator. It shows status only; the pages themselves move the user on. It is the system's one stepper: the Tabs stepper variant (.qf-stepper) folded into it.

• LanguageSelector C-52

  Components · Navigation

  Lets the user read the app in another language (USWDS Language selector). A button naming the current language opens a Menu of languages, each written in its own language and script with its lang, and glossed in the page's language; an app with two languages uses a single link to the other one. UI only: choosing a language here changes the button, not the page.

• Footer C-51

  Components · Navigation

  The app's page footer: the product and its version, the accessibility statement and legal links, and the copyright line (USWDS Footer, slimmed to an app). It is not StatusBar (C-40), the editor's bar of live document facts and controls; a footer holds nothing that changes while the user works. The App shell has an optional slot for it under the content.

• List C-16

  Components · Content

  Show a column of tasks, documents or people where each row has a primary line, a secondary line and a few trailing details.

• Table C-17

  Components · Content

  Show records users compare across columns, such as name, type, owner, status, amount and date.

• Card C-18

  Components · Content

  Show one record as a self-contained summary: title, subtitle, a short body, status and people.

• Overflow C-27

  Components · Content

  Measures children and collapses the tail into a +N that opens a Popover. The static contract is a clipped flex row with a trailing counter chip.

• Resizable C-28

  Components · Content

  Split the workspace into panes side by side, such as a list and a reading pane, and let users set the split.

• Banner C-19

  Components · Feedback

  Tell users about a condition that lasts while they work in a view, such as indexing in progress, offline or read-only.

• Toast C-20

  Components · Feedback

  A Banner in a Toast shell, queued in a fixed region. Preserves the imperative toaster.* API. Five-second timer bar; dedupe by key.

• Progress C-21

  Components · Feedback

  Show how far an upload, export or batch job has gone when the total is known, with `--_value` from 0 to 100.

• EmptyState C-22

  Components · Feedback

  Fill a list, table or pane that has no items yet, and say how to add the first one.

• SaveState C-42

  Components · Versioning

  The save indicator beside a document's name: Saving…, Saved, Offline, or Not saved while it retries, with Retry now. A save never makes a version, so the indicator never says one.

• PublishVersion C-43

  Components · Versioning

  The body of the Publish version dialog: the version it will create (2.3 → 3.0), what happens to the previous published version, warnings, and a required comment. Opened from the document screen and from File → Publish version in the editor; both end in POST /api/v2/documents/{id}/publish.

• VersionHistory C-44

  Components · Versioning

  Every version of a document, newest first, grouped by Published version with its Draft checkpoints beneath. Published rows are solid with a green edge, Superseded rows sunken and muted, Draft rows indented with a dashed edge; each also says its status in a badge. Published only hides the drafts. In the editor's side pane and on the qaction document screen.

• VersionRetention C-45

  Components · Versioning

  How long Draft checkpoints are kept after the next Published version, for one classification and document type pair: inherit the rule, a number of days, or keep all. Shows the effective rule and where it comes from (this pair, the classification, or the product default). Records managers edit it; everyone else sees it read only.

• SplitButton C-30

  Components · Editor (Office)

  A primary action and a menu half sharing one hover outline (Fluent v9 pattern): two buttons in the roving order; the menu half is named "More options for …". A toggle split carries aria-pressed on the primary; a color split shows its current color in __swatch.

• KeyTip C-31

  Components · Editor (Office)

  An access-key badge at the bottom centre of its target, shown by the KeyTips primitive (P-16) on Alt+Windows or Ctrl+Option. Badges are aria-hidden; the same keys are on the control as aria-keyshortcuts.

• MiniToolbar C-32

  Components · Editor (Office)

  The floating formatting bar over a selection or above a context menu: role="toolbar", two rows at most, and never the only path to a command (every one is also in the ribbon).

• Ribbon C-33

  Components · Editor (Office)

  One DOM for both modes (spec §1.2): every control is written once with data-priority and its label; data-mode picks Compact (the default: one row, labels visually hidden, priorities 3–4 in the ⋯ menu) or Full (three small rows or a large button per group, group labels, launchers). As the width shrinks, both modes shed labels, then move controls into the ⋯ menu by priority (last group first), then fold whole groups into dropdowns; groups never overlap or clip, and horizontal scrolling is only the last resort (P-20). The tab row takes the app accent and the panel stays flat.

• Gallery C-34

  Components · Editor (Office)

  Inline in the ribbon as a one-row role="listbox" with ▲ ▼ scroll buttons (out of the tab order) and an expand button; expanded as a role="grid" with labeled row groups and footer commands. Thumbnails are rendered by the engine from the document (spec §3.3).

• ColorPicker C-35

  Components · Editor (Office)

  Popover content for font, highlight, fill and outline colors: Automatic, the theme grid (10 × 6 tints and shades), the standard row, More colors…. Each cell is labeled ("Blue, Lighter 40%"); swatches keep their true color in forced colors with a CanvasText border.

• GridPicker C-36

  Components · Editor (Office)

  The Insert table size picker (10 × 8): arrows grow the selection, the live label names it, Enter inserts. The label is the grid's aria-describedby.

• SpinButton C-37

  Components · Editor (Office)

  A numeric field with ▲▼ steps and a unit: role="spinbutton" with aria-valuetext ("1.27 centimeters"). ↑/↓ step, PageUp/PageDown take a large step.

• Slider C-38

  Components · Editor (Office)

  The zoom slider (a detent marks 100%), transparency and brightness: role="slider" with aria-valuetext. The value is a 0–1 fraction in --_value.

• TaskPane C-39

  Components · Editor (Office)

  A complementary landmark (<aside aria-labelledby>) docked at the end (or the start: navigation, thumbnails, the PDF left pane). Opening moves focus to the title; closing returns it. Two end panes share a dock with a tab strip; under 48rem a pane becomes a drawer.

• StatusBar C-40

  Components · Editor (Office)

  A footer region holding one role="toolbar": items are buttons when they open something (page → Go to, words → Word count), text otherwise; values are not live. The end holds the view radio set and the zoom control. It is not the app's page footer, which holds the version and legal links: that is Footer (C-51).

• CommentThread C-41

  Components · Editor (Office)

  A comment thread: the anchor quote, the author header (avatar, name, time, actions), the body, nested replies, the composer and the actions. In the pane, in the page margin next to its anchor, or as a popup over the page (PDF sticky notes).

• App shell

  Composites

  One grid of five children — brand, utility, nav, app bar and content — sharing a single placement map. It is the only arrangement whose reading order matches DOM order, so focus never jumps back up the page. Row one is the legacy masthead (logo on white, the navy .topMenu hugging the right corner). The nav-toggle button collapses the nav, whose rows have no icons, so the rail leaves the grid and the app bar and content take its column; on mobile it becomes a drawer. AppBar tabs are added dynamically by pages.

• OverlaySystem X-01

  Composites

  Dialogs behave like windows in an operating system. A [data-window-area] is the view area they live in; each dialog.qf-overlay[data-window] inside it drags by its header, snaps to the edges and corners of that area, resizes from eight grips, raises to the front when it is clicked or focused, and minimizes to a dock. js/windows.js writes the geometry; the nine data-snap rects, the grips, the dock and the drop-zone ghost are CSS.

• Search X-02

  Composites · App components

  The render-props search host, and the parent of every result view. It owns the toolbar (query, filters, view switch, saved views), the optional filter rail, the results region and the footer with pagination; data-view picks which of its five child views renders inside __results — list, table, gallery, kanban or two-pane. The chrome never changes with the view. DataGrid (X-03), Kanban (X-04) and Inbox (X-12) are the same idioms used standalone, and are documented separately.

• DataGrid X-03

  Composites · App components

  Table plus column persistence, a column picker and infinite load. Adds a toolbar, a sticky-header scroll body, the picker popover and the load-more sentinel.

• Kanban X-04

  Composites · App components

  Columns derived from a list-of-values property; cards are compact Cards wrapped in a DragSource. Cross-column drag moves the item and updates the property.

• InputFieldMapper X-05

  Composites · App components

  Dispatches a FieldType to the right control. Visually it adds only the property-type icon in the label; filter mode lays Fields out in a compact wrapping row, and click-to-edit mode uses Field's rest state.

• Editor X-06

  Composites · App components

  Lexical rich-text chrome: a Field-like frame with a formatting Toolbar, a content surface with typographic defaults and a status footer.

• DocumentViewer X-07

  Composites · App components

  Dispatches office files, PDF, image and email to one frame: viewer toolbar, thumbnail rail, canvas and a properties rail. Email swaps the canvas for a header/body/attachments layout.

• ErrorBoundary X-08

  Composites · App components

  Three levels wrap an EmptyState[variant=error]. Dialogs get one automatically. Component-level keeps the rest of the page alive.

• NotificationCenter X-09

  Composites · App components

  Bell with unread badge; a Popover holding a grouped, sectioned List. The bell in the app shell above opens the same popover.

• Form X-10

  Composites · App components

  Form shell: sections with titles, a 12-column row grid, an error summary and a sticky action bar. Field binding and validation come from react-hook-form in the binding.

• ObjectDisplay X-11

  Composites · App components

  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.

• Inbox X-12

  Composites

  A Search (X-02) with its own treatment: every result set is a canned search, and there is no filter rail. The app bar tabs (Active · Completed · Delegated) are the canned searches. Saved searches reuse the same two panes: a task list on the left and the selected task on the right. Pagination or Load more sits under the list. Saved searches are a menu button in the toolbar; the .qf-saved-views chip row stays in the markup but is hidden.