City of Ghent Style Guide

Form label

UX & accessibility

A form label tells the user what the corresponding input field means.

  • Use short and descriptive form labels so users can quickly scan your form.
  • Form labels should be top aligned to their corresponding input fields.
  • All form elements must have a form label.
  • Form labels are visually and syntactically related to the form element.

Form Label 

<label for="{{ for }}">{{ label }}
{% if label_optional %}
  <span class="label-optional">
    {{ label_optional }}
  </span>
{% endif %}
</label>
 
<label for="form-item">Label
    <span class="label-optional">
        Optional
    </span>
</label>
 
{
  "label": "Label",
  "for": "form-item",
  "label_optional": "Optional"
}
  • Content: 
    label {
  @include label();

  .label-optional {
    @include optional-label();

    margin: 0 0 3px 5px;
  }
}
  • URL: /components/raw/form-label/_form-label.scss
  • Filesystem Path: components/21-atoms/form-label/_form-label.scss
  • Size: 112 Bytes