Bulk Selection

Selection intended for bulk operations.

Customer orders
Order Customer Status Total
#1042A. WhitfieldShipped£64.00
#1041R. OkaforProcessing£128.50
#1040M. IqbalShipped£22.00
#1039S. NovakRefunded£40.00

html

<div class="bulk" data-count="2" style="--accent:#241430;">
  <div class="bulk__toolbar" role="toolbar" aria-label="Bulk actions">
    <span class="bulk__count">2 selected</span>
    <button type="button" class="bulk__btn">Archive</button>
    <button type="button" class="bulk__btn bulk__btn--ghost">Cancel</button>
  </div>
  <div class="bulk__scroll">
    <table class="bulk__table">
      <caption>Customer orders</caption>
      <thead>
        <tr>
          <th scope="col" class="bulk__checkcol"><label class="chk"><input type="checkbox"><span class="sr-only">Select all rows</span></label></th>
          <th scope="col">Order</th>
          <th scope="col">Customer</th>
          <th scope="col">Status</th>
          <th scope="col">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr><td><label class="chk"><input type="checkbox" checked><span class="sr-only">Select order #1042</span></label></td><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td>£64.00</td></tr>
        <tr><td><label class="chk"><input type="checkbox" checked><span class="sr-only">Select order #1041</span></label></td><td>#1041</td><td>R. Okafor</td><td>Processing</td><td>£128.50</td></tr>
        <tr><td><label class="chk"><input type="checkbox"><span class="sr-only">Select order #1040</span></label></td><td>#1040</td><td>M. Iqbal</td><td>Shipped</td><td>£22.00</td></tr>
        <tr><td><label class="chk"><input type="checkbox"><span class="sr-only">Select order #1039</span></label></td><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td></tr>
      </tbody>
    </table>
  </div>
</div>
<style>
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.bulk { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.bulk__toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--accent); color: #FAF7F2; }
@media (prefers-reduced-motion: no-preference) {
.bulk__toolbar { transition: background .15s; }
}
.bulk[data-count="0"] .bulk__toolbar { display: none; }
.bulk__count { font-weight: 600; margin-right: auto; }
.bulk__btn { border: 1px solid #FAF7F2; background: transparent; color: inherit; padding: 6px 12px; border-radius: 6px; font: inherit; cursor: pointer; }
.bulk__btn:hover { background: #FAF7F226; }
.bulk__btn:focus-visible { outline: 2px solid #FAF7F2; outline-offset: 2px; }
.bulk__btn--ghost { border-color: #FAF7F260; }
.bulk__scroll { overflow-x: auto; }
.bulk__table { border-collapse: collapse; width: 100%; }
.bulk__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.bulk__table th, .bulk__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }
.bulk--compact .bulk__table th, .bulk--compact .bulk__table td { padding: 4px 10px; }
.bulk__table input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.bulk[data-count="2"] tbody tr:nth-child(-n+2) { background: #A8E6C155; }
.bulk[data-count="4"] tbody tr:nth-child(-n+4) { background: #A8E6C155; }
</style>

tailwind

<div class="max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden" data-count="2" style="--accent:#241430;">
  <div class="flex items-center gap-2.5 px-3.5 py-2.5 text-[#FAF7F2]" style="background:#241430" role="toolbar" aria-label="Bulk actions">
    <span class="font-semibold mr-auto">2 selected</span>
    <button type="button" class="border border-[#FAF7F2] bg-transparent text-inherit px-3 py-1.5 rounded-md hover:bg-white/15 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2">Archive</button>
    <button type="button" class="border border-white/40 bg-transparent text-inherit px-3 py-1.5 rounded-md hover:bg-white/15">Cancel</button>
  </div>
  <div class="overflow-x-auto">
    <table class="border-collapse w-full">
      <caption class="text-left font-semibold px-3.5 py-2.5">Customer orders</caption>
      <thead>
        <tr>
          <th scope="col" class="p-3.5 text-left border-b border-[#24143020]"><label class="inline-flex"><input type="checkbox" class="[accent-color:var(--accent)] w-4 h-4"><span class="sr-only">Select all rows</span></label></th>
          <th scope="col" class="p-3.5 text-left border-b border-[#24143020] whitespace-nowrap">Order</th>
          <th scope="col" class="p-3.5 text-left border-b border-[#24143020] whitespace-nowrap">Customer</th>
          <th scope="col" class="p-3.5 text-left border-b border-[#24143020] whitespace-nowrap">Status</th>
          <th scope="col" class="p-3.5 text-left border-b border-[#24143020] whitespace-nowrap">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr><td class="p-3.5 border-b border-[#24143020]"><label class="inline-flex"><input type="checkbox" checked class="[accent-color:var(--accent)] w-4 h-4"><span class="sr-only">Select order #1042</span></label></td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1042</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">A. Whitfield</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Shipped</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£64.00</td></tr>
        <tr><td class="p-3.5 border-b border-[#24143020]"><label class="inline-flex"><input type="checkbox" checked class="[accent-color:var(--accent)] w-4 h-4"><span class="sr-only">Select order #1041</span></label></td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1041</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">R. Okafor</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Processing</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£128.50</td></tr>
        <tr><td class="p-3.5 border-b border-[#24143020]"><label class="inline-flex"><input type="checkbox" class="[accent-color:var(--accent)] w-4 h-4"><span class="sr-only">Select order #1040</span></label></td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1040</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">M. Iqbal</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Shipped</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£22.00</td></tr>
        <tr><td class="p-3.5 border-b border-[#24143020]"><label class="inline-flex"><input type="checkbox" class="[accent-color:var(--accent)] w-4 h-4"><span class="sr-only">Select order #1039</span></label></td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1039</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">S. Novak</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Refunded</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£40.00</td></tr>
      </tbody>
    </table>
  </div>
</div>
<style>
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
[data-count="0"] [role="toolbar"] { display: none; }
[data-count="2"] tbody tr:nth-child(-n+2) { background: #A8E6C155; }
[data-count="4"] tbody tr:nth-child(-n+4) { background: #A8E6C155; }
</style>

react

function BulkSelection({
  caption = "Customer orders",
  accent = "#241430",
  selectedCount = "2",
  actionLabel = "Archive",
  compact = false,
}) {
  const rows = [
    ["#1042", "A. Whitfield", "Shipped", "£64.00"],
    ["#1041", "R. Okafor", "Processing", "£128.50"],
    ["#1040", "M. Iqbal", "Shipped", "£22.00"],
    ["#1039", "S. Novak", "Refunded", "£40.00"],
  ];
  const n = Number(selected);
  const pad = compact ? "4px 10px" : "10px 14px";
  return (
    <div style={{ maxWidth: 480, borderRadius: 10, border: "1px solid #24143020", overflow: "hidden", font: "14px system-ui, sans-serif", color: "#241430", background: "#FAF7F2" }}>
      {n > 0 && (
        <div role="toolbar" aria-label="Bulk actions" style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: accent, color: "#FAF7F2" }}>
          <span style={{ fontWeight: 600, marginRight: "auto" }}>{n} selected</span>
          <button type="button" style={{ border: "1px solid #FAF7F2", background: "transparent", color: "inherit", padding: "6px 12px", borderRadius: 6, font: "inherit", cursor: "pointer" }}>{actionLabel}</button>
          <button type="button" style={{ border: "1px solid #FAF7F260", background: "transparent", color: "inherit", padding: "6px 12px", borderRadius: 6, font: "inherit", cursor: "pointer" }}>Cancel</button>
        </div>
      )}
      <div style={{ overflowX: "auto" }}>
        <table style={{ borderCollapse: "collapse", width: "100%" }}>
          <caption style={{ textAlign: "left", fontWeight: 600, padding: "10px 14px" }}>{caption}</caption>
          <thead>
            <tr>
              <th scope="col" style={{ padding: pad, borderBottom: "1px solid #24143020" }}><input type="checkbox" aria-label="Select all rows" style={{ accentColor: accent }} /></th>
              {["Order", "Customer", "Status", "Total"].map((h) => (
                <th key={h} scope="col" style={{ padding: pad, textAlign: "left", borderBottom: "1px solid #24143020", whiteSpace: "nowrap" }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((row, i) => (
              <tr key={row[0]} style={{ background: i < n ? "#A8E6C155" : "transparent" }}>
                <td style={{ padding: pad, borderBottom: "1px solid #24143020" }}>
                  <input type="checkbox" defaultChecked={i < n} aria-label={`Select order ${row[0]}`} style={{ accentColor: accent }} />
                </td>
                {row.map((cell, j) => <td key={j} style={{ padding: pad, borderBottom: "1px solid #24143020", whiteSpace: "nowrap" }}>{cell}</td>)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}