SimpleFormConfigurable

A drop-in replacement for <SimpleForm> whose visible inputs can be reordered or hidden by the end user via the <Inspector>.

Installation

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

Usage

Use <SimpleFormConfigurable> wherever you would use <SimpleForm>, then ensure your app renders an <InspectorButton> and an <Inspector>.

import {
  Edit,
  InspectorButton,
  Inspector,
  Layout,
  SimpleFormConfigurable,
  TextInput,
} from "@/components/admin";
 
const MyLayout = ({ children }) => (
  <Layout appBarChildren={<InspectorButton />}>
    {children}
    <Inspector />
  </Layout>
);
 
const PostEdit = () => (
  <Edit>
    <SimpleFormConfigurable>
      <TextInput source="id" />
      <TextInput source="title" />
      <TextInput source="body" />
    </SimpleFormConfigurable>
  </Edit>
);

When the user toggles edit mode (via the <InspectorButton> in the app bar), a cogwheel appears next to the form. Clicking it opens the inspector with a <FieldsSelector> of the form's inputs. Users can toggle visibility and drag rows to reorder.

Props

PropRequiredTypeDefaultDescription
childrenRequiredReactNode-The inputs (or any element with a source prop).
preferenceKeyOptionalstring${resource}.simpleFormStorage key for user preferences.
omitOptionalstring[]-Sources hidden by default. Users can re-enable them from the inspector.
...rest-SimpleFormProps-All other props are forwarded to the underlying <SimpleForm>.

preferenceKey

By default, user preferences are stored under preferences.${resource}.simpleForm. If a single resource hosts more than one <SimpleFormConfigurable>, set a unique preferenceKey on each.

const PostCreate = () => (
  <Create>
    <SimpleFormConfigurable preferenceKey="posts.draft">
      <TextInput source="title" />
      <TextInput source="body" />
    </SimpleFormConfigurable>
  </Create>
);

omit

Use the omit prop to hide inputs by default. The user can still re-enable them from the inspector.

const PostEdit = () => (
  <Edit>
    <SimpleFormConfigurable omit={["id", "author"]}>
      <TextInput source="id" />
      <TextInput source="title" />
      <TextInput source="author" />
      <TextInput source="body" />
    </SimpleFormConfigurable>
  </Edit>
);

How it works

Internally, <SimpleFormConfigurable> wraps <SimpleForm> in a <Configurable> whose editor is a <FieldsSelector> reading from inputs / availableInputs preference keys.

On first mount, it walks its children and writes an availableInputs array of { index, source, label? } into the store. The inspector's <FieldsSelector> then reads that array to render the toggle list. The form filters its children based on the inputs preference array.

See also