Edit

The page that fetches a record and lets the user update it.

The <Edit> view lets users update an existing record. It reads the record id from the route (/posts/:id), fetches and hydrates the record into a form, and publishes the edit / save / record / form contexts its children read. You compose the inputs directly as children — Chelone has no <SimpleForm> wrapper; the view is the form.

A live edit form

Here is the posts edit view for a seeded record, running against the in-memory provider:

Loading preview…

src/posts.tsx

import {
  BooleanInput,
  Edit,
  NumberInput,
  ReferenceInput,
  SelectInput,
  TextInput,
  Toolbar,
} from "@chelone/react";
 
export function PostEdit() {
  return (
    <Edit>
      <TextInput source="title" />
      <TextInput source="body" multiline />
      <ReferenceInput source="author_id" reference="authors">
        <SelectInput optionText="name" />
      </ReferenceInput>
      <NumberInput source="views" min={0} />
      <BooleanInput source="published" />
      <Toolbar />
    </Edit>
  );
}

Wire it onto the resource so /posts/:id renders it:

<Resource name="posts" edit={PostEdit} />

How it works

<Edit> resolves the resource (from <Resource> context or the resource prop) and the record id (from the :id route param or the id prop), then runs the edit-form controller. The controller fetches the record, seeds the form store with its values, and exposes a submit handler that validates, persists via the data provider's update, and refetches the resource's queries. The <Toolbar>'s Save button fires that submit; Delete is confirm-gated.

The header (title and actions) renders straight away. The children mount once the record has loaded, so inputs never see an empty form.
A successful save shows the "updated" notification and redirects to the resource's list. onSuccess runs after the form resets to the saved record and does not replace either of those. To stay on the page, build the page with useEditForm and pass onRedirect.

Validation from the schema

The schema comes from defineResources: when the posts entry carries a Zod schema, the form validates against it on submit, with no per-input validate props (see Resource). Clear the Title in the preview above and save: the schema's .min(1, "Title is required") rule blocks the submit and surfaces the message.

Props

Prop	Type	Default	Description
actions	ReactNode	—	Header actions (show/delete buttons); nothing by default.
children	ReactNode	—
className	string	—
component	ElementType<any, keyof IntrinsicElements>	—
id	Identifier	—	Override the record id (defaults to the `:id` route param).
onSuccess	(record: TRecord) => void \| Promise<void>	—	Runs after a successful save with the SERVER record, post-reconciliation.
resource	string	—	Override the ambient resource (defaults to the `<Resource>` context).
sanitizeEmptyValues	boolean	—	ra parity: nullify/strip empty TOP-LEVEL values before save. Default false.
schema	StandardSchemaV1<Partial<Record<string, unknown>>, unknown>	—	Resource schema (zod or any Standard Schema) — wired as the default form validator by the submit pipeline (T2).
title	ReactNode	—	Header title. A string/element renders as an `<h2>`; `false` omits it.
validate	FormLevelValidate<Partial<Record<string, unknown>>>	—	Form-level validate fn (ra contract) — consumed by the submit pipeline (T2).

Tips

<Edit> reads :id from the route; pass an explicit id prop to edit a fixed record outside a route (as the preview above does).
The children are the form body — compose inputs, layout, and a <Toolbar> (or a bare <SaveButton>) however you like.