Bulk Editing

Edit multiple records together.

html

<section class="bed" style="--accent:#E8A020;" aria-label="Invoices bulk editing">
  <h3 class="bed__heading">Invoices</h3>
  
  <div class="bed__toolbar" role="toolbar" aria-label="Bulk actions">
    <span class="bed__count" role="status">2 selected</span>
    <button type="button" class="bed__action bed__action--status">Set status</button>
    <button type="button" class="bed__action bed__action--status">Archive</button>
    <button type="button" class="bed__action bed__action--status">Export</button>
  </div>
  
  <table class="bed__table">
    <thead><tr><th scope="col"><span class="bed__sr">Select</span></th><th scope="col">Invoice</th><th scope="col">Status</th></tr></thead>
    <tbody>
      <tr><td><input type="checkbox" checked aria-label="Select INV-1042"></td><td>INV-1042</td><td>Draft</td></tr>
      <tr><td><input type="checkbox" checked aria-label="Select INV-1041"></td><td>INV-1041</td><td>Draft</td></tr>
      <tr><td><input type="checkbox" aria-label="Select INV-1040"></td><td>INV-1040</td><td>Sent</td></tr>
    </tbody>
  </table>
</section>
<style>
.bed { font: 13.5px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 380px; width: 380px; padding: 16px; border-radius: 12px; box-sizing: border-box; }
.bed__heading { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.bed__toolbar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--accent); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; flex-wrap: wrap; }
.bed__count { font-weight: 700; margin-right: 4px; }
.bed__action { background: var(--accent); border: none; border-radius: 6px; padding: 5px 10px; font: inherit; font-weight: 600; cursor: pointer; color: #241430; }
.bed__action:hover { filter: brightness(0.94); }
.bed__action:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
.bed__action--archive { border: 1.5px solid var(--accent); background: transparent; }
.bed__action--export { border-radius: 999px; }
.bed__table { border-collapse: collapse; width: 100%; }
.bed__table th, .bed__table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid #24143014; }
.bed__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
</style>

tailwind

<section class="bed-tw font-sans text-[13.5px] text-[#241430] bg-[#FAF7F2] max-w-[380px] w-[380px] p-4 rounded-xl box-border" style="--accent:#E8A020" aria-label="Invoices bulk editing">
  <h3 class="m-0 mb-2.5 text-[15px] font-bold">Invoices</h3>
  
  <div role="toolbar" aria-label="Bulk actions" class="flex items-center gap-2 bg-white rounded-lg py-2 px-2.5 mb-2.5 flex-wrap" style="border:1.5px solid #E8A020">
    <span role="status" class="font-bold mr-1">2 selected</span>
    <button type="button" class="bed-tw__action bed-tw__action--status rounded-md py-1 px-2.5 font-semibold border-0 cursor-pointer text-[#241430]" style="background:#E8A020">Set status</button>
    <button type="button" class="bed-tw__action bed-tw__action--status rounded-md py-1 px-2.5 font-semibold border-0 cursor-pointer text-[#241430]" style="background:#E8A020">Archive</button>
    <button type="button" class="bed-tw__action bed-tw__action--status rounded-md py-1 px-2.5 font-semibold border-0 cursor-pointer text-[#241430]" style="background:#E8A020">Export</button>
  </div>
  
  <table class="border-collapse w-full">
    <thead><tr><th scope="col" class="text-left p-2"><span class="sr-only">Select</span></th><th scope="col" class="text-left p-2">Invoice</th><th scope="col" class="text-left p-2">Status</th></tr></thead>
    <tbody>
      <tr><td class="p-2 border-b border-[#24143014]"><input type="checkbox" checked aria-label="Select INV-1042"></td><td class="p-2 border-b border-[#24143014]">INV-1042</td><td class="p-2 border-b border-[#24143014]">Draft</td></tr>
      <tr><td class="p-2 border-b border-[#24143014]"><input type="checkbox" checked aria-label="Select INV-1041"></td><td class="p-2 border-b border-[#24143014]">INV-1041</td><td class="p-2 border-b border-[#24143014]">Draft</td></tr>
      <tr><td class="p-2 border-b border-[#24143014]"><input type="checkbox" aria-label="Select INV-1040"></td><td class="p-2 border-b border-[#24143014]">INV-1040</td><td class="p-2 border-b border-[#24143014]">Sent</td></tr>
    </tbody>
  </table>
</section>
<style>
.bed-tw__action--archive { border: 1.5px solid #E8A020; background: transparent !important; }
.bed-tw__action--export { border-radius: 999px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
</style>

react

export function BulkEditing({
  heading = "Invoices",
  selectedCount = 2,
  accent = "#E8A020",
  action = "status",
  showToolbar = true,
}) {
  const btnStyle = {
    background: action === "archive" ? "transparent" : accent,
    border: action === "archive" ? `1.5px solid ${accent}` : "none",
    borderRadius: action === "export" ? 999 : 6,
    padding: "5px 10px", font: "inherit", fontWeight: 600, cursor: "pointer", color: "#241430",
  };
  return (
    <section aria-label={`${heading} bulk editing`} style={{ fontFamily: "system-ui, sans-serif", fontSize: 13.5, color: "#241430", background: "#FAF7F2", maxWidth: 380, width: 380, padding: 16, borderRadius: 12, boxSizing: "border-box" }}>
      <h3 style={{ margin: "0 0 10px", fontSize: 15, fontWeight: 700 }}>{heading}</h3>
      {showToolbar && (
        <div role="toolbar" aria-label="Bulk actions" style={{ display: "flex", alignItems: "center", gap: 8, background: "#fff", border: `1.5px solid ${accent}`, borderRadius: 8, padding: "8px 10px", marginBottom: 10, flexWrap: "wrap" }}>
          <span role="status" style={{ fontWeight: 700, marginRight: 4 }}>{selectedCount} selected</span>
          <button type="button" style={btnStyle}>Set status</button>
          <button type="button" style={btnStyle}>Archive</button>
          <button type="button" style={btnStyle}>Export</button>
        </div>
      )}
      <table style={{ borderCollapse: "collapse", width: "100%" }}>
        <thead><tr><th scope="col" style={{ textAlign: "left", padding: 8 }}><span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden" }}>Select</span></th><th scope="col" style={{ textAlign: "left", padding: 8 }}>Invoice</th><th scope="col" style={{ textAlign: "left", padding: 8 }}>Status</th></tr></thead>
        <tbody>
          <tr><td style={{ padding: 8, borderBottom: "1px solid #24143014" }}><input type="checkbox" defaultChecked aria-label="Select INV-1042" /></td><td style={{ padding: 8, borderBottom: "1px solid #24143014" }}>INV-1042</td><td style={{ padding: 8, borderBottom: "1px solid #24143014" }}>Draft</td></tr>
          <tr><td style={{ padding: 8, borderBottom: "1px solid #24143014" }}><input type="checkbox" defaultChecked aria-label="Select INV-1041" /></td><td style={{ padding: 8, borderBottom: "1px solid #24143014" }}>INV-1041</td><td style={{ padding: 8, borderBottom: "1px solid #24143014" }}>Draft</td></tr>
          <tr><td style={{ padding: 8, borderBottom: "1px solid #24143014" }}><input type="checkbox" aria-label="Select INV-1040" /></td><td style={{ padding: 8, borderBottom: "1px solid #24143014" }}>INV-1040</td><td style={{ padding: 8, borderBottom: "1px solid #24143014" }}>Sent</td></tr>
        </tbody>
      </table>
    </section>
  );
}