sfreact-submit-flow

Components

Import UI components from react-submit-flow. They are client components and can be placed inside an existing client form or action group.

SubmitFlowRoot

Provides a flow to descendant buttons and SubmitFeedback without adding a wrapper element.

<SubmitFlowRoot flow={flow}>
  <ActionButton action="archive" input={{ id }}>
    Archive
  </ActionButton>
  <SubmitFeedback />
</SubmitFlowRoot>

SubmitFlowForm

Renders one native <form>. Set defaultAction for Enter-key submissions and optionally map each action's FormData to its typed input with getInput.

<SubmitFlowForm
  flow={flow}
  defaultAction="save"
  getInput={{ save: (data) => ({ title: String(data.get("title") ?? "") }) }}
>
  <input name="title" required />
  <SubmitButton action="save">Save</SubmitButton>
</SubmitFlowForm>

Buttons and inline feedback

  • SubmitButton submits the nearest SubmitFlowForm; its action selects the action.
  • ActionButton invokes the flow directly and accepts action plus optional input.
  • CancelButton requests cancellation while busy; while idle it calls its onCancel callback.
  • BackButton calls its required onBack callback and disables while the flow is busy.
  • SubmitFeedback displays the current flow's pending or feedback message, or renders custom children.

Buttons accept native button attributes and forward refs. The library controls type, action selection, and effective busy state. See form behavior for event and validation details.