EU System

Legends

Documentation • Demo

Forms Legends

Legends are used to add a caption to a group of related form elements that have been grouped together into a fieldset.

When to use this component

When there is a need to name a group of related input elements in a form.

{#
  Parameters:
    - "content" (string) (default: '')
    - "level" (integer) (default: 1): 1 (in a top-level fieldset) or 2 (in a nested fieldset)
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
  Blocks:
    - "legend": main content
#}

{# Internal properties #}

{% set _css_class = 'ecl-form-legend' %}
{% set _extra_attributes = '' %}
{% set _content = content|default('') %}
{% set _level = level|default('') %}

{# Internal logic - Process properties #}

{% if _level is not empty %}
  {% set _css_class = _css_class ~ ' ecl-form-legend--level-' ~ _level %}
{% endif %}

{% 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 #}

{% spaceless %}
<legend class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  {%- block legend _content -%}
</legend>
{% endspaceless %}
 
/* Level 1 */
{
  "content": "Legend for a top-level fieldset",
  "level": 1
}


/* Level 2 */
{
  "content": "Legend for a nested fieldset",
  "level": 2
}


<!-- Level 1 -->
<legend class="ecl-form-legend ecl-form-legend--level-1">Legend for a top-level fieldset</legend>


<!-- Level 2 -->
<legend class="ecl-form-legend ecl-form-legend--level-2">Legend for a nested fieldset</legend>
  • Content: 
    /**
 * Legend component
 * @define form-legend
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-form-legend/generic-component-form-legend';

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