---
name: FormField
menu: UI Kit
---

import { Playground, PropsTable } from 'docz'
import { Field } from "react-final-form";
import { Label, FormFieldHeader, TextField, FormFieldDescription, HelperText, FormField, TextFieldWithValidation, DurationField, ValidationMessage } from '../'

# FormField

`FormField` is to be used with Form Components: `FormFieldDescription`, `FormFieldHeader`, `TextField`, `HelperText`, etc.
These components manage the gutters between inner elements to ensure consistent spacing.

- `FormField` should wrap a form input and its label, along with any field descriptions or helper text
- `FormFieldHeader` wraps a form label and its helper text. Not necessary if there's only a label
- `FormFieldDescription` is a general description or explanation of the field or series of fields
- `HelperText` is clarifying information or instructions, that follows a label
- `TextFieldWithValidation` wraps a text field and its validation

## Justify content
<Playground>
  <FormField>
    <Label htmlFor="simple.field">A simple form field</Label>
    <Field name="simple.field">
      {({ input, meta }) => (
        <TextFieldWithValidation
          meta={meta}
          {...input}
        />
      )}
    </Field>
  </FormField>
  <FormField>
    <FormFieldDescription>This is a description of this form field</FormFieldDescription>
    <FormFieldHeader>
      <Label htmlFor="simple.field">A form field with helper text</Label>
      <HelperText>This is some helper text or instructions</HelperText>
    </FormFieldHeader>
    <Field name="simple.field">
      {({ input, meta }) => (
        <TextFieldWithValidation
          meta={meta}
          {...input}
        />
      )}
    </Field>
  </FormField>
  <FormField>
    <Label htmlFor="simple.field">A form field with a different input type</Label>
    <Field name="simple.field">
      {({ input, meta }) => (
        <HorizontalGutter spacing={2}>
          <DurationField
            units={[DURATION_UNIT.WEEKS,]}
            disabled={disabled}
            color={colorFromMeta(meta)}
            {...input}
          />
          <ValidationMessage meta={meta} fullWidth />
        </HorizontalGutter>
      )}
    </Field>
  </FormField>
</Playground>
