Bulk actions

Preview Available in release assets

Apply one server-validated command to explicitly selected record identifiers.

Server contract

Use .thin-bulk-actions on a stable identified region. Datastar 1.0.2 may request server fragments; the application owns permissions, validation, idempotency, persistence, and reconciliation.

Server-rendered content, real links, native controls, and ordinary submitted forms preserve the complete workflow without Datastar or JavaScript.

Bulk actions primary example

<form class="thin-bulk-actions" id="order-bulk-actions" action="/api/advanced/dashboard?view=bulk" method="post" data-on:submit="@post('/api/advanced/dashboard?view=bulk')">
  <fieldset>
    <legend>Select orders</legend>
    <label>
      <input type="checkbox" name="ids" value="1024"> Order 1024</label>
      <label>
        <input type="checkbox" name="ids" value="1025"> Order 1025 with a long customer reference</label>
      </fieldset>
      <label>Action<select name="action" required>
      <option value="">Choose action</option>
      <option value="archive">Archive</option>
    </select>
  </label>
  <button class="thin-button">Apply to selected orders</button>
</form>

Show code

<form class="thin-bulk-actions" id="order-bulk-actions" action="/api/advanced/dashboard?view=bulk" method="post" data-on:submit="@post('/api/advanced/dashboard?view=bulk')">
  <fieldset>
    <legend>Select orders</legend>
    <label>
      <input type="checkbox" name="ids" value="1024"> Order 1024</label>
      <label>
        <input type="checkbox" name="ids" value="1025"> Order 1025 with a long customer reference</label>
      </fieldset>
      <label>Action<select name="action" required>
      <option value="">Choose action</option>
      <option value="archive">Archive</option>
    </select>
  </label>
  <button class="thin-button">Apply to selected orders</button>
</form>

Anatomy

Stable server-owned region
Heading and current status
Native links or form controls
Server result and error text

Variants and sizes

Checkbox selection
Page selection

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Idle
Pending
Empty
Partial success
Error
Forbidden
Long content
Narrow container
Reconnect

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Native checkboxes submit repeated IDs and an action. The server validates every ID, permission, and partial result before returning the reconciled list and summary.

Accessibility

Use semantic headings, native controls, explicit labels, selected counts, text status/error messages, and predictable focus. Announce completed server changes, not every intermediate client event; preserve source and focus order across patches.

Contract

LIVE

Basis

Native forms, links, file inputs, status regions, and action buttons; async semantics must be chosen per update

Evidence

tests/unit/library/dashboard-recipes.test.ts

API

Use .thin-bulk-actions on a stable identified region. Datastar 1.0.2 may request server fragments; the application owns permissions, validation, idempotency, persistence, and reconciliation.

Behavior tier: datastar-required

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Server-rendered content, real links, native controls, and ordinary submitted forms preserve the complete workflow without Datastar or JavaScript.

Assets and dependencies

/components.css

Dependencies: datastar@1.0.2

Source: packages/ui/src/items/dashboard/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes

Button