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.
Behavior
Form inputs that are in Active should have a 2dp border using our active color:
#217cbb
#217cbb
Form inputs that are in Focus should have a 2dp border using our focus color:
#353a40
#6a6e79
Form inputs that are invalid should have a 2dp border using our danger color:
#da212c
#da212c
Form inputs that are disabled should be 40% opacity.
Form inputs that are read only have background color:
#e0e1e9
#171c1e
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.
