Skip to main content

Specifications

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

Example Size

56px

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
    .
State Example
Default

Example of a Default Input

Filled

Example of a filled Input

Focus

Example of a focus Input

Info

Example of a info Input

Success

Example of a success Input

Warning

Example of a warning Input

Error

Example of a error Input

Disabled

Example of a disabled Input

Read only

Example of a readonly Input

Label above or on the side

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

/Input label top and side

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.
Last updated November 14, 2023.