Overview

The SimpleForm layout — usage and props.

Installation

pnpm dlx shadcn@latest add @shadmin/simple-form

Usage

<SimpleForm> is often used as child of <Create> or <Edit>. It accepts Input components as children. It requires no prop by default.

import { Edit, SimpleForm, TextInput, BooleanInput } from "@/components/admin";
 
export const ProductEdit = () => (
  <Edit>
    <SimpleForm>
      <TextInput source="name" />
      <BooleanInput source="available" />
    </SimpleForm>
  </Edit>
);

<SimpleForm> reads the record from the RecordContext, uses it to initialize the form default values, renders its children and a toolbar with a <SaveButton> that calls the save callback prepared by the edit or the create controller when pressed.

It relies on react-hook-form for form handling. It calls react-hook-form's useForm hook, and places the result in a FormProvider component. This means you can take advantage of the useFormContext and useFormState hooks to access the form state.

Props

Prop	Required	Type	Default	Description
`children`	Required	`ReactNode`	-	The form content (usually Input elements).
`className`	Optional	`string`	-	Extra classes appended to base layout
`component`	Optional	`ElementType`	`Form`	Override the form wrapper; defaults to ra-core's `<Form>`
`defaultValues`	Optional	`object \| function`	-	The default values of the record.
`id`	Optional	`string`	-	The id of the underlying `<form>` tag.
`noValidate`	Optional	`boolean`	-	Set to `true` to disable the browser's default validation.
`onSubmit`	Optional	`function`	`save`	A callback to call when the form is submitted.
`sanitizeEmptyValues`	Optional	`boolean`	-	Set to `true` to remove empty values from the form state.
`toolbar`	Optional	`element`	-	The toolbar component.
`validate`	Optional	`function`	-	A function to validate the form values.
`warnWhenUnsavedChanges`	Optional	`boolean`	-	Set to `true` to warn the user when leaving the form with unsaved changes.

Additional props are passed to the useForm hook and to the underlying <div> wrapping the form.

`component`

By default, <SimpleForm> uses ra-core's <Form> as the form wrapper. Pass any React element type to component to replace it — useful for custom form implementations or testing:

import { SimpleForm } from "@/components/admin";
import { MyCustomFormWrapper } from "./my-form";
 
export const PostCreate = () => (
  <Create>
    <SimpleForm component={MyCustomFormWrapper}>
      <TextInput source="title" />
    </SimpleForm>
  </Create>
);