Basic form: success and failure

Submit a typed form, inspect the pending state, and toggle a simulated server error.

Live example Interactive

Display name Simulate save error

flow.statusidleflow.pendingAction—

const flow = useSubmitFlow({
  save: {
    run: async (input: { name: string }, { signal }) => saveProfile(input, signal),
    pendingLabel: 'Saving profile…',
    success: 'Profile saved.',
    error: 'The example request failed.',
  },
})

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

Read the related guide →

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