Inputs

Specifications

• Label Text Color:
  #252a2e
  #6a6e79
• Input Text Color:
  #252a2e
  #ffffff
• Placeholder Text Color:
  #90939f
  #90939f
• Border Color:
  #252a2e
  #6a6e79
• Container Color:
  #ffffff
  #000000

Note: Incab sizes only, see mobile for smaller options for in-field.

Behaviors

• 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 its appearance will shift content.
• Form inputs that are in Active should have a 4dp border using our active color :
  #0c77be
  . Labeled** should be:
  #b7b9c3
  #019aeb
  .
• Form inputs that are invalid should have a 4px border using our danger color:
  #da212c
  .
• Form inputs that are disabled should be:
  #b7b9c3
  #6a6e79
  Stroke
  #353a40
• Form inputs that are read only have background color:
  #e0e1e9
  #353a40
  .

Label above or on the side

For most applications, use the label above, but to reduce scrolling, use the side label for inputs.

Editorial

• 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.