Fabric 107
Learn about Forms pre-alpha

Overview

  • Place form elements vertically without labels outside of the element
  • The size of form elements should match the size of the expected input
  • Really try and keep labels short, but if the label must be long, then the width of the input should match the width of the label
  • When we refer to labels, we're talking about the identifier that allows the user to understand what they should enter in a form field. Labels are not equal to placeholders.

Examples

  • Perfect! 👏
  • Items aren't aligned vertically
  • All inputs are the same size
  • Labels outside of the element
  • Labels outside of the element

Test your Knowledge! +10 pts

If you have an address in a form, how should you display the full state and zip code?

  • Vertically, all fields are the same width
  • Vertically, but the input area for state is longer than for zip code
  • Right next to one another, all fields are the same width
  • Right next to one another, but the input area for state is longer than for zip code