Skip to content

<label>

Labels associate text descriptions with form controls.

<input> can be nested inside a <label> or associated externally using for/id.

Basic Usage

Use for on the label and a matching id on the input to associate them explicitly.

live preview
editable html
<label for="first_name">
  First name
</label>
<input name="first_name" id="first_name" placeholder="First name"></input>

Input inside

Wrapping an input inside a label implicitly associates them.

live preview
editable html
<label>
  Last name
  <input name="last_name" placeholder="Last name"></input>
</label>

For helper text using <small>, see <small>.