# Field's Anatomy

Fields are the heart of this engine, and you can deal whit then in two flavors:

```jsx
<Form inspect>
    {// Declareted }
    <Field fName='latitude'>
        {(fieldBidings, fieldStatus) => <input {...fieldBidings} />}
    </Field>
    
    {// Factored }
    <InputField fName={'name'} fInspect/>
</Form>
```

**The Declarative Way**

Note that every prop comes prefixed with `f`, like `fName`. This is important because we don't want props been overwritten when interfaces merge, on wrapping fields (see: The Factored Way).

```jsx
//"fieldBidings" Contains all bindings methods needed to the doble-way binding cycle, like onChange and value... 
//"fieldStatus" Contains information about the field, like, if it have errors or have been touched...
<Field fName='latitude'>
    {(fieldBidings, fieldStatus) => <input {...fieldBidings} />}
</Field>
```

**The Factored Way**

Factories make using fields blase fast! Just bake once, e you are ready to go. Note that the new field have the two interfaces. It's own props, plus, the Field props.

**Important:** I recommend to sufix every baked field with "Field", to avoid messes with the native ones... After all, the baked one, is a new component!

```jsx
// 1. Bake the field
const ComponentField = FieldFactory<ComponentProps>((fprops, props, fieldBindings, fielStatus) => 
    <Component {...props} {...fieldBindings} />
)

// 2. Use it
<ComponentField fName='name'/>
```