# <FormBuilder /> Component

## Description

• A module for displaying, validating, and handling groups of form fields • Displays in either live view or edit view • In "edit view", a drag-and-drop ux is provided to help users build forms • shows a list sortable object with a custom item container (<EditFormField />) • In "live view", the form is generated based on the incoming data it receives

## Checklist

This component should...

- (Rendering) Should render component in dom
- (Rendering) The list of <EditFormFields /> or <LiveFormFields /> displayed should match number of fields in data array
- (Rendering) Should use <EditFormFields /> when in edit mode
- (Rendering) Should use <LiveFormFields /> when in live mode
- (Rendering) Should use the "validationSchema" prop to determine the Yup validation schema
- (Rendering) Should use the items in the "globalFieldStyle" prop to determine the style to use each of the input field elements
- (Events) Should trigger the "onChange" event when one of the fields change
- (Events) Should trigger the "onBlur" event when one of the fields triggers a blur event

## Usage

To install it...

> npm install @sandcastle/components

Add it to your project...

```
import * as React from 'react'
import * as FormBuilder from '@sandcastle/components/FormBuilder`

export default () => (
  <FormBuilder

  />
)
```

## Best Practices

To do: Add any Best Practices here

## Lifecycle Hooks

To do: Add any Lifecycle Hooks here

## Related Components

To do: Add any Related Components here