React component that renders a Feathery form

Initialize this component in your React app at the location where you want a Feathery form to appear. It renders your form as an HTML <form> element.




ID of your Feathery form to display. It can be found on your dashboard, under the form's settings page.

optional functions

Pass in callback functions to run custom code when different events occur in your form (submit, load, error, etc.)

React Ref

Pass in a ref that receives the form context, which contains helper functions allowing you to modify the form state directly.


optional object

Initial form field values of the shape {<fieldId>: <fieldValue>}. If not passed in, Feathery will generate default initial values as necessary.


optional string

If specified, this will be the first step your user sees.


optional object

Options for the loader as the form initializes. By default no loader will be shown while loading the form, unless the user is waiting on authentication. Full reference


optional PopupOptions

If popup options are set, your Feathery form will show up as a popup on top of your page rather than inline with the rest of the content.


optional string

This is a comma-separated list of ISO 639-1 language code(s) to show the form in if a translation file in one of those languages has been uploaded for the form in its settings.

The languages will be prioritized according to their order in the specified string. If no translation for any of the specified languages is found, the form language will by default show up as written in the visual editor.


optional boolean

Disables form validation and submissions and prevents user from editing field values.


optional boolean

If showing the test or draft form, hide the test nav bar. If not specified, the test nav bar will be shown.


optional object

Override specific props of the underlying HTML<form> element by passing in an object mapping your desired prop keys to values.


optional object

Override specific form element props by passing in a map from element ID to an object of custom props to be applied to that element. E.g., you can hide a field by passing in {<fieldID> : {style: {visibility: 'hidden'}}}.


{<containerId>: <JSX element>}

Custom components you'd like to position per-step, in the flow of elements. Full reference


optional JSX elements

Custom, absolute-positioned components that you want to render across all steps. Full reference


optional string

Your custom CSS class(es) to associate with your form element.


optional object

Your custom inline CSS styling to associate with your form element.

Last updated