Design System
Forms

Label

The accessible name for a control. Every input needs one, wired by a matching id — a placeholder is not a label.

Purpose

Label connects visible text to a control through htmlFor, which is what lets a screen reader announce the control and what makes clicking the text focus it. Field wraps this up for you along with hint and error text.

Example

Best practices

Do

  • Always set htmlFor to the control's id.
  • Keep labels short and in sentence case.

Don't

  • Rely on a placeholder as the label — it disappears the moment someone types.
  • Hide the label visually unless the control is unambiguous on its own.

On this page