Skip to main content

ListForm

ListForm renders a create/edit form for a SharePoint list item directly from the list's metadata — fields, types, and validation are derived from the list schema, so you don't hand-build the form. It's driven by an IListFormContext that you create with the useListFormContext hook from /spfx.

SPFx component

ListForm and useListFormContext are imported from @spartanfx/react/spfx — they use SharePoint (PnPjs + SPFx context).

When to use​

  • Standard add/edit forms over a SharePoint list, honoring the list's field configuration.
  • Forms where you want SharePoint's schema (required fields, choices, lookups) to drive the UI.

Import​

import { ListForm } from '@spartanfx/react';
import { useListFormContext } from '@spartanfx/react/spfx';

Basic usage​

Build the context with the hook, then pass it to ListForm.

function ProjectForm({ sp, webPartContext }) {
  const ctx = useListFormContext({
    sp,
    listName: 'Projects',
    itemId: 5, // omit for a new item
    webPartContext,
    onInit: async (ctx) => {
      ctx.formState.setText('Title', 'Initial Value');
    },
  });

  return <ListForm listFormContext={ctx} />;
}

Key props​

PropTypeDefaultNotes
listFormContext (required)IListFormContext—Metadata, form state, and list behavior — from useListFormContext.
showLoadingWhileInitalizebooleantrueShow a spinner until the form is initialized.
classNamestring—Class on the root wrapper.

The form logic lives in the context — see useListFormContext and IListFormContext for reading/writing field values, validation, and saving.

See the full generated reference: ListForm API ↗.

See also​