City of Ghent Style Guide

Label

UX & accessibility

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

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

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 theme('color', 'color-tertiary', 'label-color');
  @include bold-text;

  .label-optional {
    @include theme('color', 'color-primary--darken-2', 'label-optional-color');
    @include theme('background-color', 'color-primary--lighten-5', 'label-optional-background');

    padding: 0 .2rem;
    float: right;
    border-top-left-radius: border-radius('radius-1');
    border-top-right-radius: border-radius('radius-1');
    font-size: .6rem;
  }

  display: block;
  //margin: 0 0 .4rem;
  font-size: .8rem;
  line-height: 1.2rem;
}
  • URL: /components/raw/label/_label.scss
  • Filesystem Path: components/21-atoms/label/_label.scss
  • Size: 553 Bytes