Do you know how to align your form labels?

Last updated by Brady Stroud [SSW] 17 days ago.See history

There are different ways to align your form labels and each has its own pros and cons.

Top aligned

label top aligned


  • Easiest to process
  • Fastest completion times
  • Good for multiple languages


  • Takes up a lot of vertical space!
  • Makes a long-form look even longer!

Left aligned

label left aligned


  • Easy to scan labels, especially if you have a lot of optional labels
  • Takes a little more attention to fill in, so useful for complicated forms that require accuracy


  • Horizontal space, unlike vertical space, is not limitless, and an unintended horizontal scrollbar is the first sin of web development.
  • Slowest completion times
  • Poor multilanguage support
  • Not even very good responsive support

Right aligned

label right aligned


  • Best at linking label and form
  • Good completion rates on small, common forms (i.e. Login, Sign up)


  • Hardest to read and scan
  • Poor multilanguage support
  • Poor responsive support

Material labeling

Alternatively, we can use Material labeling which places them inside the form and slides up on focus.

label material labeling


  • Best for readability
  • Best for visual connectivity
  • Best for completion rates
  • Decent multilanguage support
  • Decent responsive support


  • Extremely time-consuming to implement. Need to consider the cost/benefit.
  • Not necessarily available on 3rd party platforms, like Wufoo or Microsoft Forms.
We open source. Powered by GitHub