EC System

Labels

Documentation • Demo

Labels

Labels inform the user about the type of information that should be typed or selected in a form element.

Why and how to use this component

These are labels that tell users what the corresponding input fields mean, they can be composed of a main “label” and a “help block” element

  • label
  • help block

When to use

In every form element.

Do not use this component

With left aligned labels. Top aligned labels also translate well on mobile

Avoid

  • labels written in all caps - they are more difficult to read and scan
  • using placeholder text as labels
  • placing check boxes side by side - check boxes underneath each other allows easy scanning
  • using optional fields in forms - if you use them, you should clearly distinguish which fields are mandatory * from those that are optional. The convention is to use an asterisk (*) next to the required fields’ labels and to display the message “Fields marked with an asterisk (*) are required.” on the top of the page
  • hiding basic helper text
{#
  Parameters:
    - "label" (string) (default: '')
    - "for_attribute" (string) (default: ''): ID of the element the label is bound to
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
  Blocks:
    - "label": main content
#}

{# Internal properties #}

{% set _css_class = 'ecl-form-label' %}
{% set _extra_attributes = '' %}
{% set _label = label|default('') %}
{% set _for_attribute = for_attribute|default('') %}

{# Internal logic - Process properties #}

{% if extra_classes is defined and extra_classes is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value|e ~'"' %}
  {% endfor %}
{% endif %}

{# Print the result #}

<label class="{{ _css_class }}"{{ _extra_attributes|raw }}{{ _for_attribute is not empty ? ' for="' ~ _for_attribute ~ '"'  : '' }}>{% block label _label %}</label>
 
{
  "label": "Some label"
}
 
<label class="ecl-form-label">Some label</label>
  • Content: 
    /**
 * Buttons component
 * @define form-label
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-component-form-label/generic-component-form-label';

// Use generic mixin
@include exports('ec-component-form-label') {
  @include ecl-form-label();
}
  • URL: /components/raw/ec-component-form-label/ec-component-form-label.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-label/ec-component-form-label.scss
  • Size: 284 Bytes
  • Handle: @ecl/ec-component-form-label
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-label/ec-component-form-label.twig