onError is a <Feathery.Form> prop and callback function to access and modify form state when an error has occurred in the form.

For example, it's triggered when an integration fails or when the user fills out invalid information. If an error is manually set via the React library, this callback will not be triggered. This function can be asynchronous.


You can use onError to navigate to a new step, update field values, and more.

import { init, Form } from 'feathery-react';
function App() {
// Initialize Feathery to Peter
init('adminAPIKey', '');
// Show the `onboarding` Feathery form
return <Form
// Store form data in backend
onError={(context) => {
context.setStep('Step 4');

Context Properties#

errorFieldIdstringThe ID of the field that is erroring.
errorFieldTypestring enumThe type of the field that is erroring.
errorMessagestringThe error message.
fieldsfieldData objectThe info of all fields in the form.
stepNamestringThe unique ID of the step.
userIdstringThe unique ID of the current user.
triggertriggerData objectThe info of the error trigger.
setProgressfunctionIf a progress bar exists on the step, its progress will be set to the value passed in (0 - 100). If null is passed, the progress bar will default to its original value.
setStepfunctionIf you want to reroute the user to a different step, pass setStep the ID of the new step to route to. For example, setStep('new-step')
setValuesfunctionPass in an object of the shape {<fieldKey>: <fieldValue>} to customize internal form state
setOptionsfunctionPass in an object of the shape {<fieldKey>: [<fieldOption>]} to override the options a user can select for specific fields.
elementRepeatIndexintegerSpecifies which repetition of the field the error is on. This value is 0-indexed and equals 0 if the field doesn't repeat.

triggerData Object#

idstringThe ID of the element that triggered the error
typestring enumThe type of element that triggered the error. Can be button, text, or field.
actionstring enumclick if the trigger was clicked, change if the trigger field's value was changed.
textstringThe text displayed on the element that triggered the error.

fieldData Object#

The object keys are unique field ID strings, defined by users in the Feathery dashboard. They map to objects that store additional field-specific information, defined below.

displayTextoptional stringText to display to your user along with the field
typestring enumField type (e.g. textarea, checkbox, etc.)
valueoptional polymorphicUser-submitted value for this field. null if no submission, Promise<File> if file submission, array of values if repeated.

fieldData Example#

age: {
displayText: 'How old are you?',
type: 'integer_field',
value: 21
photo_id: {
displayText: 'Upload a photo of your ID',
type: 'rich_file_upload',
value: Promise<File>

Return Value#

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