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
{#
Accepts:
- "label" (string or block): label (mandatory)
- "for_attribute" (string): ID of the element (optional)
- "extra_classes" (string): extra CSS classes to be added
- "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
#}
{% set _css_class = 'ecl-form-label' %}
{% if extra_classes is defined %}
{% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}
{% if extra_attributes is defined %}
{% for attr in extra_attributes %}
{% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
{% endfor %}
{% endif %}
<label class="{{ _css_class }}"{{ _extra_attributes|raw }}{{ for_attribute is defined ? ' for="' ~ for_attribute ~ '"' : '' }}>{% block label label %}</label>
{
"label": "Some label"
}
<label class="ecl-form-label">Some label</label>
-
Content:
/** * Buttons component * @define form-label */ .ecl-form-label { color: $ecl-color-shade; display: block; font-size: map-get($ecl-font-size, 's'); font-weight: bold; margin-bottom: 0; padding: 0; text-align: left; } - URL: /components/raw/ecl-forms-labels/_labels.scss
- Filesystem Path: framework/components/ecl-forms/ecl-forms-labels/_labels.scss
- Size: 235 Bytes
- Handle: @ec-europa/ecl-forms-labels
- Tags: atom
- Preview:
- Filesystem Path: framework/components/ecl-forms/ecl-forms-labels/ecl-forms-labels.twig