Row Selection Summary - Everyday Interface Patterns

A static selected-row summary shows 2 selected, 5 total, selected rows Invoice 102 and Invoice 104, and Selection preview status.

Program

A row selection summary should make the selected count and selected row names visible before any bulk action runs.

row_selection_summary.html

Visuals: captured from real browser rendering

<section class="row-selection" aria-labelledby="row-selection-title"><h2 id="row-selection-title">Row selection summary</h2><div class="selection-card" aria-label="Static selected row preview"><span>2 selected</span><span>Invoice 102</span><span>Invoice 104</span></div><dl>
  <div><dt>Selected</dt><dd>2 selected</dd></div><div><dt>Total</dt><dd>5 total</dd></div>
  <div><dt>Selected rows</dt><dd>Invoice 102 and Invoice 104</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Selection preview</span></dd></div></dl>
  <p class="check">Learner check: the selected count and rows are visible without click handling.</p>
  <p class="note">Static row selection summary only; no selection engine, checkbox event, click handler, keyboard handler, form submit, row mutation, bulk action execution, archive operation, move operation, delete operation, routing, navigation, route, API, network, storage, cookie, script, event listener, timer, analytics, object URL, download, service worker, account/session behavior, live table selection, live toolbar, or live submission runs.</p></section>
<style>
  .row-selection { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .selection-card { display: grid; gap: 6px; justify-self: start; min-width: 220px; border: 1px solid #0f766e; background: #ffffff; padding: 10px; }
  .selection-card span:first-child { color: #0f766e; font-weight: 700; border-bottom: 1px solid #ccfbf1; padding-bottom: 4px; }
  .row-selection dl { display: grid; gap: 8px; margin: 0; }
  .row-selection dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .row-selection dt { color: #475569; }
  .row-selection dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the row selection summary.
The section is labelled by its visible heading.
Show selected and total rows.
The selected and total counts are exact pinned data.
Show selected rows.
The selected rows are exact pinned data.
Render selection-preview status.
The status badge says this is a selection preview.
Check selected-row readback.
The check says the selected count and rows are visible without click handling.
Check row selection honesty.
Selection counts, selected rows, status, and no live toolbar.

step flow step(1) labels the source, step(2) shows the selected and total structure, step(3) shows exact selected rows, step(4) shows selection-preview status, step(5) checks selected-row readback, and step(6) checks the honesty note.

selected row readback The section heading names the row selection summary surface.

selection rows Selected, Total, Selected rows, and Status values are exact pinned data.

no live selection The lesson should not imply a selection engine, checkbox events, click handlers, keyboard handlers, form submits, row mutations, bulk action execution, archive, move, or delete operations, routing, navigation, routes, APIs, networks, storage, cookies, scripts, event listeners, timers, analytics, object URLs, downloads, service workers, account/session behavior, live table selection, live toolbars, or live submissions.