# <LiveFormField /> Component

## Description

• A component that loads the live version of the individual form field • what shows in the real web page (or editor canvas with overlay turned on)

## Checklist

This component should...

- (Rendering) Should show the <TextField /> when the type prop is TEXT
- (Rendering) Should show the <DateField /> when the type prop is DATE
- (Rendering) Should show the <NumberField /> input when the type prop is NUMBER
- (Rendering) Should show the <CurrencyField /> when the type prop is CURRENCY
- (Rendering) Should show <DropdownField /> menu when the type prop is DROPDOWN
- (Rendering) Should show a checkbox & label (<Checkboxes /> the when type prop is CHECKBOX
- (Rendering) Should show radio input fields (<MultipleChoice /> the when type prop is MULTIPLECHOICE
- (Rendering) Should show a <ContentField /> the when type prop is TYPOGRAPHY
- (Rendering) Should show a <FileUpload /> component when the type prop is FILEUPLOAD
- (Rendering) Should show a <LinearScale /> component when the type prop is LINEARSCALE
- (Rendering) Should use the "placeholder" property found in a data array object as the placeholder for the form field
- (Rendering) Should use the "disabled" property found in a data array object determine whether or not the field is disabled
- (Rendering) Should use the "style" property found in a data array object to determine the style to use for the default form field
- (Rendering) Should use the "icon" property found in a data array object to determine the icon to use in this form field
- (Rendering) Should use the "label" property found in a data array object to determine the label to show next to the form field
- (Rendering) Should use the "value" property found in a data array object to  determinethe value to use for the form field
- (Rendering) Should use the "description" property found in a data array object to determine the description to show next to the form field
- (Rendering) Should use the "(items)" property found in a data array object to determine the list of items to include in a dropdown menu field
- (Rendering) Should use the "values" prop to determine the field values to use for the form
- (Events) Should trigger the "onChange" property found in a data array object when the form field changes
- (Events) Should onChange should send back the original payload it received, but mutated)
- (Events) Should trigger the "onClick" property found in a data array object when a click event occurs with the form field
- (Events) Should trigger the "onKeyUp" property found in a data array object when a keyUp event occurs with the form field

## Usage

To install it...

> npm install @sandcastle/components

Add it to your project...

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

export default () => (
  <LiveFormField

  />
)
```

## 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