# 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

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `actionsRef` | `RefObject<FieldActionsRef>` | No | — |  |
| `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
| `autocomplete` | `boolean | AutocompleteTypes` | No | — | Determines if browser form autocomplete is enabled. Note that "one-time-code" is experimental and should not be used ... |
| `autofocus` | `boolean` | No | — | Determines if the input should be auto-focused, using the HTML attribute |
| `children` | `ReactNode` | No | — | If you need to pass in a children. For example, `<options>` inside `<select>`. |
| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |
| `defaultValue` | `string | Date` | No | — | Initial value of the input. Only use this when you need to pre-populate the field with a data that is not controlled ... |
| `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
| `disabled` | `boolean` | No | — | Disable the input |
| `id` | `string` | No | — | A unique identifier for the input. |
| `inline` | `boolean` | No | — | Adjusts the form field to go inline with a content. This also silences the given `validations` prop. You'd have to us... |
| `inputRef` | `RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>` | No | — |  |
| `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
| `keyboard` | `"numeric" | "decimal"` | No | — | Determines what kind of keyboard appears on mobile web. |
| `loading` | `boolean` | No | — | Show a spinner to indicate loading |
| `max` | `number` | No | — | Specifies the maximum numerical or date value that a user can type |
| `maxLength` | `number` | No | — | Maximum character length for an input. This also changes the width to roughly the same size as the max length. This i... |
| `min` | `number` | No | — | Specifies the minimum numerical or date value that a user can type |
| `name` | `string` | No | — | Name of the input. |
| `onBlur` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Blur callback. |
| `onChange` | `(newValue: string | number | boolean | Date, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void` | No | — | onChange handler that provides the new value (or event) @param newValue @param event |
| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | A callback to handle "Enter" keypress. This will only run if Enter is the only key. Will not run if Shift or Control ... |
| `onFocus` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Focus callback. |
| `onKeyUp` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — |  |
| `onValidation` | `(message: string) => void` | No | — | Callback to get the the status and message when validating a field @param message |
| `pattern` | `string` | No | — | Pattern is currently only used for the InputPhone type it is used to determine the format of the phone number and the... |
| `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
| `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field |
| `readonly` | `boolean` | No | — | Prevents users from editing the value. |
| `rows` | `number` | No | — | Exclusively for textareas. Specifies the visible height of a textarea. |
| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
| `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
| `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field |
| `toolbar` | `ReactNode` | No | — | Toolbar to render content below the input. |
| `toolbarVisibility` | `"while-editing" | "always"` | No | — | Determines the visibility of the toolbar. |
| `type` | `FormFieldTypes` | No | — | Determines what kind of form field should the component give you. |
| `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
| `value` | `string | number | Date` | No | — | Set the component to the given value. |
| `version` | `1` | No | — | Experimental: Determine which version of the FormField to use. Right now this isn't used but it will be used in the f... |
| `wrapperRef` | `RefObject<HTMLDivElement>` | No | — |  |
