Label

Each input should have a label, mainly for accessibility reasons. By default, we recommend to wrap the <label> around the input, this allows the input to get focus when we click the label without having to use ID or for="" attributes.

An optional sublabel can be displayed between the label and text input, by adding a class "ui-form__sublabel" to an element (div).

Label only

Usage

<div class="ui-form__group">
  <label>
    <div class="ui-form__label">...</div>
    <input class="ui-input" type="text" />
  </label>
</div>

With sub label

Usage

<div class="ui-form__group">
  <label>
    <div class="ui-form__label">...</div>
    <div class="ui-form__sublabel">...</div>
    <input class="ui-input" type="text" />
  </label>
</div>