2. Forms
3. Label

Label & Subtext

Effective labeling helps users understand what information to enter into a text input.

Text fields should always have a label. In rare cases, where the context makes the label unnecessary, consult an accessibility expert before using a label-less design.

Default Label

A simple label should always be associated with an input using the for attribute.

<fieldset>
  <label for="text">Label</label>
</fieldset>

Label & Subtext

For additional guidance, use subtext below the label to provide extra context.

<fieldset>
  <label for="text">Label</label>
  <p class="txt--subtext">...</p>
</fieldset>

Invalid

To indicate errors or invalid input, apply the .invalid class to the fieldset and ensure the subtext provides useful feedback.

<fieldset>
  <label for="text">Label</label>
  <p class="txt--subtext">...</p>
</fieldset>