onSubmit()

This event handler runs when a step of the form is submitted.

Overview

onSubmit is a <Feathery.Form> prop and callback function to access and modify form state when a form step is successfully submitted. It's called every time the user is about to successfully submit a step of the form, but before the actual submission happens. This function can be asynchronous.

Usage

You can use onSubmit to store the submitted user data, update your rendered components, set custom errors, and more. It takes a single Context object that provides form-related state and handlers.

import { init, Form } from '@feathery/react';

function App() {
  // Initialize Feathery
  init('SDKKey', '[e-mail]');

  // Show the `onboarding` Feathery form
  return <Form
    formName='onboarding'
    // Store form data in backend
    onSubmit={(context) => {
      writeToBackend(context.submitFields);
      if (context.lastStep) console.log("User finished form!");
    }}
  />
}

Context API

Key	Type	Description
Form Context		Consistently available form state and functions
submitFields	fieldData	The data of fields that the user just submitted. Excludes fields hidden by conditional rules.
trigger	triggerData	Info of the element that triggered the submission.

triggerData Object

Key	Type	Description
id	string	The ID of the element that triggered the submission
text	string	The text displayed on the element that triggered the submission.
type	string enum	The type of element that triggered the submission. Can be button, text, or field.
repeatIndex	integer	If the element that triggered the submission repeats, this specifies which repetition it is. This value is 0-indexed and equals 0 if the element doesn't repeat.

Return value

A promise can be optionally returned from this function if it's asynchronous and you want execution to await.