Skip to Main Content

Pelican Design System icon Pelican Design System Label Guidance

Label Guidance

Labels give the user additonal control and context for form controls.

Edit on GitHub

On this page:

Best Practices

  • Labels are required for form controls.
  • Don’t replace Labels with placeholders.
  • Refrain from using placeholder attributes in inputs because they cause usability problems.
  • Ensure the for and id attributes have matching values. Note the code below.
  • Use a red asterisk () to denote required fields.

Usage

On mobile browsers this presents an email-optimized UI. 
<div class="form-group">
  <label for="inputTextBox499">
      <span class="fas fa-asterisk text-danger mr-1 me-1" aria-hidden="true"></span>Input Email Label
    </label>
  <input type="tel" class="form-control" id="inputTextBox499" placeholder="This is a placeholder, don’t use.">
  <small>On mobile browsers this presents an email-optimized UI.</small>
</div>

Resources

Previous
Next
Page top