Building blocks

Use the Field component to standardise the field's label, hint text and error messaging. This component doesn't have the 'input' element.

  • In Figma it is added below
  • In code it's passed in as a child component

Available fields

Easily compose a form from any of these pre-made fields


TextField can be

  • Email
  • Number
  • Password
  • Telephone
  • Text


Special inputs

These are in the process of being standardised into the above format

Field groups


Field groups need a group label, which should always sit aligned above the input. This label allows users to understand what to enter as well as auto focussing the input which creates a larger touch target.