• Visual Language
  • Forms

Text input with supporting text

Usage notes

A different style of text for the supporting text separates it from the element label.

The label should follow sentence case; that is Upper case first word, then lower case second word(s).

Support text should be used to give key information that is essentially to complete the form field. Examples include password format and explanations for data collection.

 
<label class="field field--spaced field--text">
  <b class="field__label">Email account</b>
  <span class="description field__description label__description">This will be your username</span>
  <input class="input input--med" type="email" value="ex">
</label>