Label

<label for="form-item">Label
  <span class="label-optional">
    (Optional)
  </span>
</label>
<label for="{{ for }}">{{ label }}
{% if label_optional %}
  <span class="label-optional">
    ({{ label_optional }})
  </span>
{% endif %}
</label>
{
  "label": "Label",
  "for": "form-item",
  "label_optional": "Optional"
}
  • Content:
    label {
      @include themify {
        color: $label-color;
    
        .label-optional {
          color: $label-optional-color;
        }
      }
    }
    
  • URL: /components/raw/label/_label.scss
  • Filesystem Path: components/21-atoms/label/_label.scss
  • Size: 125 Bytes

Label

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.