Bulk Update

This demo shows how to implement a common pattern where rows are selected and then bulk updated. This is accomplished by putting a form around a table, with checkboxes in the table, and then including the checked values in the form submission (POST request):

<form id="checked-contacts"
      hx-swap="outerHTML settle:3s"
      <tbody id="tbody">
          <td>Joe Smith</td>
          <td><input type="checkbox" name="active:joe@smith.org"></td>
    <input type="submit" value="Bulk Update">
    <span id="toast"></span>

The server will bulk-update the statuses based on the values of the checkboxes. We respond with a small toast message about the update to inform the user, and use ARIA to politely announce the update for accessibility.

#toast.htmx-settling {
  opacity: 100;

#toast {
  background: #E1F0DA;
  opacity: 0;
  transition: opacity 3s ease-out;

The cool thing is that, because HTML form inputs already manage their own state, we don’t need to re-render any part of the users table. The active users are already checked and the inactive ones unchecked!

You can see a working example of this code below.

Server Requests ↑ Show