Skip to main content


Input fields collect information from users.


  • Label Text Color:
  • Input Text Color:
  • Placeholder Text Color:
  • Border Color:
  • Focus:
  • Active:

Input Specifications

  • Always have a label next to the text field, either above, on the left side or login in the input.
  • Label text should always be visible.
  • Display the validation state clearly. The validation message will replace Helper Text
  • Try to make Label text concise. Where it must be longer (due to language translation), the label text can wrap to a second line. Truncate label at end of second line if absolutely necessary.
  • Don’t add validation text under helper text, as their appearance will shift content.


  • Form inputs that are in Active should have a 2dp border using our active color:
  • Form inputs that are in Focus should have a 2dp border using our focus color:
  • Form inputs that are invalid should have a 2dp border using our danger color:
  • Form inputs that are disabled should be 40% opacity.
  • Form inputs that are read only have background color:

Inputs Behavior


  • When possible, add helper text below an input to further clarify selections or validation errors.
  • Always mark required fields with an * .
  • Provide input constraints, such as a character limit within a text entry box, to provide users with guidelines and improve form efficiency.
  • Use multi-step forms when necessary by breaking up inputs into distinct categories.
  • Provide clear and obvious action buttons. Form submission Buttons should be primary.