Forms

Forms gather and display input from users.

Guidelines:

  • Forms may autosave or require a submit event depending on context and the type of input.
  • Inputs should include:
  • A brief and descriptive labels
  • ‘(Optional)’ after the label iif the field is optional
  • A character count if there is a limit
  • An indication of output value if the input is a slider
  • A placeholder that shows the user what an acceptable value looks like (except for passwords or any private information)
  • Inline validation and an appropriate error message if the input must match a specific pattern
  • Helper text, if the reason for the input is not immediately obvious
  • Distinct visual indications for blurred, focused, error, and read-only states