Introduction

The SQForm library is an opinionated Form system specific to the needs of SelectQuote.

Hello, SQForm!

When setting up our SQForm we follow a series of steps based on the Form requirements

1. Setup our forms initial values object

function HelloForm() {
  const initialValues = { firstName: '', lastName: '' };

  return (
    <SQForm initialValues={initialValues} onSubmit={noop}>
      <SQFormTextField name="firstName" label="First name" />
      <SQFormTextField name="lastName" label="Last name" />
    </SQForm>
  );
}

2. Configure our method to handle what occurs when our form is submitted

function HelloForm() {
  const initialValues = { firstName: '', lastName: ''}

  const handleSubmit = async (values, actions) => {
    console.log(`Hello, ${values.firstName} ${values.lastName}!`));
  }

  return (
    <SQForm
      initialValues={initialValues}
      onSubmit={handleSubmit}
    >
      <SQFormTextField name="firstName" label="First name" />
      <SQFormTextField name="lastName" label="Last name" />
    </SQForm>
  );
}

Formik onSubmit

The onSubmit function has two parameters. Values and Actions. Formik onSubmit Docs

Need Form Validation?

 const initialValues = { firstName: '', lastName: ''}

const validationSchema = {
  firstName: Yup.string().required(),
  lastName: Yup.string().required(),
};

function HelloForm() {
  const handleSubmit = async (values, actions) => {
    console.log(`Hello, ${values.firstName} ${values.lastName}!`));
  }

  return (
    <SQForm
      initialValues={{ firstName: '', lastName: '' }}
      onSubmit={handleSubmit}
      validationSchema={validationSchema}
    >
      <SQFormTextField name="firstName" label="First name" />
      <SQFormTextField name="lastName" label="Last name" />
    </SQForm>
  );
}

Validation Schema

Formik has first class support for Yup validation schemas. Formik validationSchema Docs