# Form Field

FormField is a helper component that allows other components to use form logic.
Interacting with a component wrapped in a FormField will automatically update
the form value for the field used by the component.

## Related components

Refer to the [Form](../Form/Form.md) documentation to learn more about inputs
within a form.


## Configuration

### Mobile

FormField should not be used to wrap separate instances of a given input
component, it should be done at the component level. For example, say you had
four SpecialInput components on a given form. Instead of the four SpecialInput
components in FormField, it would be better to go to the SpecialInput component
where it is exported and wrap it there.

```ts
// The SpecialInput implementation, without any form logic
function SpecialInputInternal(props) {
  ...
}

// This is what would be exported and used by other views or components
export function SpecialInput(props) {
  return (
    <FormField name={props.name}>
      {(field) => {
        return (
          <SpecialInput
            ...props
            onChange={field.onChange}
            value={field.value}
          />
        );
      }}
    </FormField>
  );
}
```


## Props

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `(field: ControllerRenderProps<FieldValues, string>, error?: FieldError) => ReactNode` | Yes | — | Children to render. |
| `name` | `string` | Yes | — | Name of the field. |
| `defaultValue` | `T` | No | — | The initial value of the form field. |
| `validations` | `RegisterOptions` | No | — | Rules for returning an error when validations are violated. WARNING: This component needs to be nested inside a FormP... |