Bulk Action Review Patterns

Bulk Selection Bar

A static bulk selection bar shows 3 selected items, item names Copy review, Legal checklist, Launch banner, and Archive selected.

Program

Bulk selection bars help people confirm what is selected before any archive, delete, queue, or mutation work happens.

bulk_selection_bar.html
Visuals: captured from real browser rendering
<section class="bulk-bar" aria-labelledby="bulk-bar-title">
  <h2 id="bulk-bar-title">Bulk selection</h2>
  <p class="count">Selected: 3 items</p>
  <ul aria-label="Selected items">
    <li>Copy review</li>
    <li>Legal checklist</li>
    <li>Launch banner</li>
  </ul>
  <button type="button">Archive selected</button>
  <p class="note">Static bulk review only; the button does not route, save, send, archive, delete, mutate, queue, or undo anything.</p>
</section>
<style>
  .bulk-bar { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .count { border: 1px solid #60a5fa; background: #eff6ff; padding: 8px; font-weight: 700; }
  .bulk-bar ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .bulk-bar li { border: 1px solid #cbd5e1; padding: 4px 8px; }
  .bulk-bar button { justify-self: start; padding: 8px 12px; }
  .bulk-bar p, .note { margin: 0; }
  .note { color: #475569; }
</style>

  1. Label the bulk selection bar.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show the selected count.

    The count is exact pinned data.
    The count is exact pinned data.

  3. Show the first selected item.

    The first item name is exact pinned data.
    The first item name is exact pinned data.

  4. Show the second selected item.

    The second item name is exact pinned data.
    The second item name is exact pinned data.

  5. Show item and action.

    The final item and button are visible before any mutation happens.
    The final item and button are visible before any mutation happens.

  6. Check bulk bar honesty.

    Count, items, action affordance, and no mutation service.
    Count, items, action affordance, and no mutation service.
labelled bulk bar The section heading names the bulk selection surface.
selected items The count and item names are exact pinned review data.
no mutation service The lesson should not imply routing, saving, archiving, deleting, queues, or undo services.