Basics

The Form component can be used on it's own, or in combination with the Stages component. Used on it's own, it is a very feature rich form component.

This is how you use it:

import { Form, plainFields as fields } from "react-stages";

...

const [data, setData] = useState({});

...

<Form
    id="myForm"
    data={data}
    fields={fields}
    config={{
        fields: () => {
            return [
                {
                    id: "email",
                    label: "Email",
                    type: "email",
                    isRequired: true
                },
                {
                    id: "password",
                    label: "Password",
                    type: "password",
                    isRequired: true
                }
            ]
        }
    }}
    render={({ actionProps, fieldProps }) => (
        <>
            <div>
                {fieldProps.fields.email}
                <br />
                {fieldProps.fields.password}
            </div>
            <hr />
            <button
                type="button"
                onClick={() => actionProps.handleActionClick(payload => console.log("onSubmit:", payload), true)}
            >
                Submit
            </button>
        </>
    )}
    onChange={payload => setData(payload)}
/>

Looks a little complicated at first, but only because the form component is built for flexibility and doesn't render any components on its own. You have to supply all the components!

The main properties#

• data: The current form data (from a React useState)
• fields: This contains all your field components and default field validation, as a start you can import the plain fields
• config: This one expects a function which return an array of field configurations, you need to set at least id and type on each field
• render: The render function is where you take all the processed fields, and output them in whatever layout you desire
• onChange: Stages is using connected inputs. The whole form acts as a connected input, as well. In other words you have to connect it to a React useState with the onChange prop

More detailed info about them on the next pages.

For very basic forms, you can create a minimal setup like this:

import { Form, plainFields as fields } from "react-stages";

...

const [data, setData] = useState({});

...

<Form
    data={data}
    onChange={payload => setData(payload)}
    fields={fields}
    config={[
        {
            id: "myField",
            label: "My Field",
            type: "text"
        }
    ]}
    renderFields={fields => (
        <div>
            {fields.myField}
        </div>
    )}      
/>