Skip to main content

Form group

Information: Documentation incomplete

This component still requires documentation.

Use the form group component to contain form elements and provides an additional validation error state.

Examples

Default

View HTML
<div class="uhb-c-form-group">
  <label class="uhb-c-label" for="address-town">
    Town or city
  </label>
  <input class="uhb-c-input" id="address-town" name="address-town" type="text">
</div>

Error

View HTML
<div class="uhb-c-form-group uhb-c-form-group--error">
  <label class="uhb-c-label" for="address-town">
    Town or city
  </label>
  <input class="uhb-c-input" id="address-town" name="address-town" type="text">
</div>

Width limited (text)

View HTML
<div class="uhb-c-form-group uhb-c-form-group--text">
  <label class="uhb-c-label" for="address-town">
    Town or city
  </label>
  <input class="uhb-c-input" id="address-town" name="address-town" type="text">
</div>