Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

template · edit-form-page

Edit form page

A Mado page recipe for editing one record with native constraints, reactive form state and application-owned persistence.

Install with npx @madojs/ui@latest add edit-form-page.

Template

Edit form page

Composition

  • Adapt the parameterized route into breadcrumbs, page header, missing state and a native form divided into labelled sections and fields.
  • Inject real persistence through createEditFormPage(); HTML constraints remain the source of truth while useForm and mutation own reactive lifecycle.

Public API

export createEditFormPage(persistRecord)
Creates the route Page at the explicit persistence boundary.
export PersistRecord(values, signal)
Abort-aware asynchronous persistence contract.
export EditRecordValues
Copied record shape intended for application replacement.
export editFormPageView(context)
Preview view whose default persistence intentionally rejects.

Accessibility contract

  • Every control has a visible label; descriptions and conditional errors are referenced only while present.
  • Submit failures use one contextual alert, success uses a stable polite status, and stale results must not overwrite newer input.

Keyboard

  • Native form submission, reset and text-entry keys remain browser-owned; the implementation does not install document shortcuts.

Focus

  • Keep focus on the submitting control or first invalid field according to application policy; route navigation uses the owning layout target.

Fallback

  • The markup and constraints remain native, but production persistence must be supplied explicitly; the copied default rejects instead of simulating success.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.