Skip to main content

<Edit>

The page-level component for editing an existing record. It fetches the record by ID, wraps a <Form> in a Cloudscape Container with a header, and submits changes to the data provider's update method.

Usage​

With no children, <Edit> renders a form automatically using the resource's input schema.

<Edit />

Custom inputs​

Pass a <Form> child with inputs to control what fields appear.

<Edit>
  <Form>
    <TextInput source="name" label="Product Name" />
    <NumberInput source="price" label="Price" />
  </Form>
</Edit>

Include / Exclude inputs​

Use include or exclude to filter the auto-generated form without writing a custom <Form>.

<Edit include={['name', 'price']} />

Title and description​

The title and description props accept a string, React node, or a function receiving the current record:

<Edit title={(record) => `Edit: ${record.name}`} />

Custom save button label​

<Edit saveButtonLabel="Update product" />

Redirect after save​

By default, <Edit> redirects to the detail view after a successful save. Override with redirect:

<Edit redirect="list" />

Props​

PropTypeDefaultDescription