CRUD edit

Preview Available in release assets

Edit a server-owned record through a native form with authoritative validation and cancellation.

Server contract

Use .thin-crud-edit on a real method/action form. Datastar @post may enhance the same endpoint; do not invent optimistic saved state.

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

CRUD edit primary example

<form class="thin-crud-edit" id="project-edit" action="/api/advanced/crud?project=alpha" method="post" data-on:submit="@post('/api/advanced/crud?project=alpha')">
  <h2>Edit Alpha migration</h2>
  <label class="thin-field">Name<input class="thin-input" name="name" value="Alpha migration" required maxlength="80" />
</label>
<label class="thin-field">Status<select class="thin-select" name="status">
<option value="active" selected>Active</option>
<option value="paused">Paused</option>
</select>
</label>
<div class="thin-crud-actions">
  <button class="thin-button">Save</button>
  <a href="/projects/alpha">Cancel</a>
</div>
</form>

Show code

<form class="thin-crud-edit" id="project-edit" action="/api/advanced/crud?project=alpha" method="post" data-on:submit="@post('/api/advanced/crud?project=alpha')">
  <h2>Edit Alpha migration</h2>
  <label class="thin-field">Name<input class="thin-input" name="name" value="Alpha migration" required maxlength="80" />
</label>
<label class="thin-field">Status<select class="thin-select" name="status">
<option value="active" selected>Active</option>
<option value="paused">Paused</option>
</select>
</label>
<div class="thin-crud-actions">
  <button class="thin-button">Save</button>
  <a href="/projects/alpha">Cancel</a>
</div>
</form>

Anatomy

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

Variants and sizes

Full-page edit
Datastar-enhanced form

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

Submit posts named values; the server validates permissions and data, then returns the form with errors or the saved detail. Cancel is a durable link.

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

Use .thin-crud-edit on a real method/action form. Datastar @post may enhance the same endpoint; do not invent optimistic saved state.

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.