creating-a-form-config-file.md

📖 US Forms System Documentation ➡️ Building a Form

Creating a form config file

Your form is generated from a JSON Schema configuration file called form.js, along with a few other key configuration files.

• For information about the basic files you need to configure a form, see "Create required files."
• For an example form.js file, see "Quick Start: Example form.js file"

In this guide

• Elements of the form config
• How React components are rendered

Elements of the form config

The form config itself is an object with many properties that determine how your form is rendered. It must contain these elements:

• Top level information about the form, such as title, URL, and whether or not certain features are enabled
• Nested objects for each chapter of the form (if you're building a multi-page form). Within each chapter, additional nested objects for each page within that chapter. For more information, see "Supporting multi-page forms."
• Top-level title and URL information about each page of the form, as well as 2 essential objects:
  • schema: Describes the form fields and the type of data each field accepts
  • uiSchema: Describes all UI elements of the form fields, such as label text, error message text, or CSS classes

The schema and uiSchema contain the essential information to build all of the form fields. For more information, see "About the schema and uiSchema objects." For a comprehensive example of a form config, with descriptions of the main properties you might include, see "Quick Start: Example form.js file".

How React components are rendered

The US Forms System code uses the form config to determine which React components to render in order to build your form, usually automatically. React components require props to render properly. These are passed down through the top-level Form component, which takes the entire form config itself as a prop. The Form component is also connected to the store, so it has access to the form data as well.

You rarely need to create or interact with React components directly to use this library, except in these cases:

• You must manually add the top level Form component for every form. For more information, see "Create required files."
• You may need to build a custom React component that isn't included in the library by default, such as for the introduction and review pages, or for special content that might appear on each a particular form page. For more information, see "Creating custom fields and widgets."

For more information, see "About the component hierarchy."

Back to Building a Form