Parameters

Learn how to pass values that can be used when rendering each form.

Parameters

The params prop of the Formity component allows us to pass values meant to be used for rendering each form. Unlike the inputs prop, these values are exclusively for rendering purposes, and any changes to them will dynamically update the form.

To pass these values, we first need to define the schema the following way:

import type { Schema, Form, Return } from "@formity/react";

import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

import { FormView, FormLayout, MultiSelect, Next } from "./components";

import { Controller } from "./controller";

export type Values = [
  Form<{ languages: string[] }>,
  Return<{ languages: string[] }>,
];

export type Inputs = {
  options: { label: string; value: string }[];
  defaultOptions: string[];
};

export type Params = {
  heading: string;
  description: string;
};

export const schema: Schema<Values, Inputs, Params> = [
  {
    form: {
      values: ({ defaultOptions }) => ({
        languages: [defaultOptions, []],
      }),
      render: ({
        inputs,
        values,
        params,
        onNext,
        onBack,
        getFlow,
        setFlow,
      }) => (
        <Controller
          step="languages"
          onNext={onNext}
          onBack={onBack}
          getFlow={getFlow}
          setFlow={setFlow}
        >
          <FormView
            defaultValues={values}
            resolver={zodResolver(
              z.object({
                languages: z.array(z.string()),
              }),
            )}
          >
            <FormLayout
              heading={params.heading}
              description={params.description}
              fields={[
                <MultiSelect
                  key="languages"
                  name="languages"
                  label="Languages"
                  options={inputs.options}
                  direction="y"
                />,
              ]}
              button={<Next>Next</Next>}
            />
          </FormView>
        </Controller>
      ),
    },
  },
  {
    return: ({ languages }) => ({
      languages,
    }),
  },
];

As you can see, we have passed the Params type to the Schema type to define the values that we want to use during rendering. These values can be accessed within the schema when rendering each form.

We can now provide the values using the params prop of the Formity component:

import { useCallback, useState } from "react";

import { Formity, OnReturn, ReturnValues } from "@formity/react";

import { Data } from "./components";

import { schema, Values, Inputs, Params } from "./schema";

export default function App() {
  const [values, setValues] = useState<ReturnValues<Values> | null>(null);

  const onReturn = useCallback<OnReturn<Values>>((values) => {
    setValues(values);
  }, []);

  if (values) {
    return <Data data={values} onStart={() => setValues(null)} />;
  }

  return (
    <Formity<Values, Inputs, Params>
      schema={schema}
      inputs={{
        options: [
          { value: "javascript", label: "JavaScript" },
          { value: "python", label: "Python" },
          { value: "go", label: "Go" },
        ],
        defaultOptions: ["javascript"],
      }}
      params={{
        heading: "What are your favourite programming languages?",
        description: "We would like to know the ones you like the most",
      }}
      onReturn={onReturn}
    />
  );
}