React Flexible FormDocsExamplesGitHub
DocumentationOverviewGetting StartedTypeScriptAPIuseFormFielduseSubformuseFieldArrayuseConvertutilsExamplesSimple FormChakra UI FormForm with ArraySubformCustom useConvertForm State in ReduxForm with LoaderForm based on Material UIThrottled error validation

Simple Form

This is basic example of the form.


First It uses useForm to create a form. Then <Field /> is used to render controls.

"use client";
import { OnSubmit, useForm, Field, getInErrors } from "react-flexible-form";
import { useCallback } from "react";
import * as Yup from "yup";
import { yupResolver } from "react-flexible-form-resolvers";

type Values = {
  firstName: string;
  lastName: string;
};

const resolver = yupResolver(
  Yup.object({
    firstName: Yup.string().required("Required"),
    lastName: Yup.string().required("Required"),
  }),
);

const SimpleForm = () => {
  const onSubmit = useCallback<OnSubmit<Values>>(
    ({ formControl: { values } }) => {
      alert(`Form values: \n ${JSON.stringify(values)}`);
    },
    [],
  );

  const formControl = useForm({
    initialValues: { firstName: "", lastName: "" },
    onSubmit,
    resolver,
  });

  return (
    <div
      style={{
        gap: "7px",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <label>First Name</label>
      <Field
        rffFormControl={formControl}
        rffName="firstName"
        rffComponent="input"
      />
      <div style={{ color: "red", whiteSpace: "pre" }}>
        {getInErrors({ errors: formControl.errors, name: "firstName" }).join(
          ", ",
        ) || " "}
      </div>
      <label>Last Name</label>
      <Field
        rffFormControl={formControl}
        rffName="lastName"
        rffComponent="input"
      />
      <div style={{ color: "red", whiteSpace: "pre" }}>
        {getInErrors({ errors: formControl.errors, name: "lastName" }).join(
          ", ",
        ) || " "}
      </div>
      <button onClick={formControl.handleSubmit}>Submit</button>
    </div>
  );
};

export default SimpleForm;