Edit Customization

Title, header actions, and editing a specific record.

<Edit> exposes a handful of props for tailoring the page chrome without touching the form body.

Title and actions

Pass a title to override the heading (the default is the record's representation), and an actions node to fill the header slot — commonly a <ShowButton> or a <DeleteButton>:

Loading preview…

src/posts.tsx

import { Edit, ShowButton, TextInput, Toolbar } from "@chelone/react";
 
export function PostEdit() {
  return (
    <Edit title="Edit post" actions={<ShowButton />}>
      <TextInput source="title" />
      <TextInput source="body" multiline />
      <Toolbar />
    </Edit>
  );
}

Set title={false} to drop the heading entirely, or actions={false} to omit the header slot.

Editing a specific record

By default <Edit> reads the record id from the :id route param. Pass an explicit id prop to edit a fixed record — useful for an inline edit panel or a detail page that isn't mounted at a resource route:

<Edit id={42} resource="posts">
  <TextInput source="title" />
  <Toolbar />
</Edit>

The resource prop likewise overrides the ambient <Resource> context, so you can render an <Edit> for a different resource than the one the route is under.

Framing the form

The component prop swaps the element that wraps the children. Pass a card or any layout wrapper to frame the form:

import { Card } from "@/components/ui/card";
 
<Edit component={Card}>{/* inputs … */}</Edit>;

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

id and resource together let you mount an <Edit> anywhere — no route required — which is exactly how the live previews on this site render.
The title default comes from the resource's recordRepresentation; set that on the <Resource> to control how records name themselves.