Create

The page for adding a new record, validated against the resource schema.

Installation

pnpm dlx shadcn@latest add @chelone/create

The <Create> view lets users add a new record. Like <Edit>, it publishes a form context and takes inputs directly as children — but it starts from an empty record instead of fetching one, and persists via the data provider's create. A successful save shows a "created" notification and redirects to the new record's edit page.

A live create form

Loading preview…

src/posts.tsx

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

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

<Resource name="posts" create={PostCreate} />

Seeding defaults

Give an input a defaultValue to pre-fill it, or seed the whole record with the record prop — handy for pre-populating a create form from a query string or a parent record:

import { Create, SaveButton, TextInput } from "@chelone/react";
 
<Create record={{ author_id: 1, published: false }}>
  <TextInput source="title" />
  <SaveButton />
</Create>;

Validation from the schema

<Create> validates against the resource's Zod schema (registered with defineResources) on submit, exactly as <Edit> does. In the preview above, submitting with an empty Title surfaces the schema's required-field message — no per-input validate props needed.

Props

Prop	Type	Default	Description
actions	ReactNode	—	Header actions; nothing by default.
children	ReactNode	—
className	string	—
component	ElementType<any, keyof IntrinsicElements>	—
onSuccess	(record: TRecord) => void \| Promise<void>	—	Runs after a successful save with the SERVER record, post-reconciliation.
record	Record<string, unknown>	—	Seed values for the not-yet-created record.
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

<Create> has no record id — it starts empty (or from the record seed) and calls the data provider's create on save, then redirects to the new record's edit page.
<Create> is pessimistic only: the cache is invalidated and refetched after the server answers, never patched ahead of it. See Mutation modes.
Use a bare <SaveButton> on create. <Toolbar> always renders Delete next to Save, and there is nothing to delete yet.
A ValidationError from the data provider lands on the matching inputs, as on <Edit>.