Alternatives to Placeholder Text

Avatar of Chris Coyier
Chris Coyier on

Andrew Coyle on when to use <input placeholder>:

  • Don’t use them as a label
  • Don’t use them as a secondary label
  • Don’t use them as example input
  • Don’t use them as helper text

Which amounts to pretty much: “Don’t use them”. Notice there are no examples of good use cases, and even the examples in the “Do” graphics just say “Placeholder Text”, which isn’t exactly demonstrative of usefulness.

I wonder if placeholder text will fall completely out of favor.

It reminds me of float labels. Float labels were a fun little fling, but they aren’t actually useful. The reason you’d reach for them is when you’re so space-limited that you can’t show a regular label beside the input. But you can’t actually ever remove the label, just move it. So if the label is still there and readable, why not just leave it there the whole time?

Direct Link →