Independent forms

Use one provider while each form keeps its own busy state and result.

Independent flows

These two action groups share the provider but keep separate locks and statuses. Start both before either finishes.

idle

function DraftForm() {
  const flow = useSubmitFlow({ save: { run: saveDraft } })
  return <SubmitFlowRoot flow={flow}>…</SubmitFlowRoot>
}

function PreviewForm() {
  const flow = useSubmitFlow({ preview: { run: buildPreview } })
  return <SubmitFlowRoot flow={flow}>…</SubmitFlowRoot>
}

Read the related guide →

This demo uses a local, temporary action. It does not send data or write to a service.