Inline editing

Preview Available in release assets

Swap a bounded server-rendered row between display and native edit forms without making the browser the record authority.

Server contract

Identify the row, submit a normal form, and return that whole row for edit, error, saved, and cancel states.

Links and ordinary server-submitted forms retain complete list, detail, edit, validation, and cancellation workflows without Datastar or JavaScript.

Inline editing primary example

<section class="thin-inline-editing" id="project-alpha-row">
  <form action="/api/advanced/crud?project=alpha&amp;view=row" method="post" data-on:submit="@post('/api/advanced/crud?project=alpha&view=row')">
    <label class="thin-field">Project name<input class="thin-input" name="name" value="Alpha migration" required maxlength="80" />
  </label>
  <input type="hidden" name="status" value="active">
  <div class="thin-crud-actions">
    <button class="thin-button">Save</button>
    <button name="intent" value="cancel">Cancel</button>
  </div>
</form>
</section>

Show code

<section class="thin-inline-editing" id="project-alpha-row">
  <form action="/api/advanced/crud?project=alpha&amp;view=row" method="post" data-on:submit="@post('/api/advanced/crud?project=alpha&view=row')">
    <label class="thin-field">Project name<input class="thin-input" name="name" value="Alpha migration" required maxlength="80" />
  </label>
  <input type="hidden" name="status" value="active">
  <div class="thin-crud-actions">
    <button class="thin-button">Save</button>
    <button name="intent" value="cancel">Cancel</button>
  </div>
</form>
</section>

Anatomy

Stable server-owned region
Durable links or form action
Native controls
Server-rendered result or validation error

Variants and sizes

Row edit
Field group edit

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.

Pending
Empty
Not found
Forbidden
Validation error
Long content
Narrow container
Reconnect after morph

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Edit requests the server form; Save posts named values; Cancel submits an explicit intent. Each response replaces the complete stable row and reconnects safely.

Accessibility

Use headings, landmarks, links, native controls, explicit labels, server error text, and predictable focus. Datastar patches the same stable region and must preserve an understandable full-page response and focus target.

Contract

COMPOSE

Basis

Native links, forms, headings, lists, and buttons; no client grid/widget role

Evidence

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

API

Identify the row, submit a normal form, and return that whole row for edit, error, saved, and cancel states.

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

Links and ordinary server-submitted forms retain complete list, detail, edit, validation, and cancellation workflows without Datastar or JavaScript.

Assets and dependencies

/components.css

Dependencies: datastar@1.0.2

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

Composition

Derived from the examples and style specs, not authored.