Label

Theme:

Ready

Notes
View
Info
HTML
Context
Assets

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 for="{{ for }}">{{ label }}
{% if label_optional %}
  <span class="label-optional">
    ({{ label_optional }})
  </span>
{% endif %}
</label>

Handle: @label
Preview:
- With layout
- Component only
Filesystem Path: components/21-atoms/label/label.twig
Referenced by (14): @file-upload, @file-upload--multiple, @file-upload--stacked, @form-item, @form-item--with-error, @form-item--with-success, @form-item--date, @form-item--email, @form-item--number, @form-item--password, @form-item--tel, @form-item--file, @search, @subscribe


        
        <label for="form-item">Label
    <span class="label-optional">
        (Optional)
    </span>
</label>


        
            
            {
  "label": "Label",
  "for": "form-item",
  "label_optional": "Optional"
}

File:

Content:


                                label {
  @include theme('color', 'color-tertiary', 'label-color');
  @include bold-text;

  .label-optional {
    @include theme('color', 'color-tertiary', 'label-color-optional');

    font-size: .8rem;
  }

  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: 296 Bytes