Field Component Reference

A block of components that are all related to a single piece of data. Typically a label, an input, help text, and an error message.


Use a Field around your inputs, errors, help text, and anything else related to that data. It will provide some kind of grouping such as borders, margin, or styling, as well as a label if you want one.

React JSX example:

<Field name="name" className="form-group" labelClassName="control-label" label="Name">
  <Input name="name" type="text" className="form-control" />
  <p className="help-block">Enter your full name</p>
  <ErrorsBlock names={['name']} className="help-block" />


ALL properties are optional. The properties listed here are governed by this specification, but components are free to add any number of additional properties as necessary.



Specify a name if you want the errors array provided. This should be the same name as the input within the field. Some Field components might not do anything with errors and therefore don't need a name.



A label string to render. Translate this before passing it in.


  message: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,

Array of error objects for all inputs related to this field. It is usually not necessary to pass these errors yourself because the closest ancestor form will do it, but you might want to pass them in when developing or testing.



Some implementations of Field will show a requiredness indicator if you pass true here. This is not used for validation; it is for display only.

Additional Properties

These properties are not strictly governed by this specification, but in order to make it easy to swap similar components, we recommend the following naming conventions: