Europa Component Library

Forms

Documentation • Demo

Forms

Form example.

{#
  This is an example and should not be used as it is.
#}

{% embed '@ec-europa/ecl-forms-forms' %}
  {% block form %}
    {% embed '@ec-europa/ecl-forms-fieldsets' %}
      {% block fieldset %}
        {% include '@ec-europa/ecl-forms-legends' with { 'extra_class': 'ecl-form-legend--level-1', 'content': 'Personal information' } %}
        {% embed '@ec-europa/ecl-forms-form-groups' %}
          {% block form_group %}
            {% include '@ec-europa/ecl-forms-labels' with { 'for_attribute': 'field-ID-1', 'label': 'First name' } %}
            {% include '@ec-europa/ecl-forms-text-inputs' with {
              'id' : 'field-ID-1',
              'name': 'field-name-1',
              'type': 'text',
              'extraAttributes': [
                { 'name': 'placeholder', 'value': 'Some placeholder text.' }
              ]
            } %}
          {% endblock %}
        {% endembed %}
        {% embed '@ec-europa/ecl-forms-form-groups' %}
          {% block form_group %}
            {% include '@ec-europa/ecl-forms-labels' with { 'for_attribute': 'field-ID-2', 'label': 'Last name' } %}
            {% include '@ec-europa/ecl-forms-text-inputs' with {
              'id' : 'field-ID-2',
              'name': 'field-name-2',
              'type': 'text',
              'extraAttributes': [
                { 'name': 'placeholder', 'value': 'Some placeholder text.' }
              ]
            } %}
          {% endblock %}
        {% endembed %}
      {% endblock %}
    {% endembed %}
    {% embed '@ec-europa/ecl-forms-fieldsets' %}
      {% block fieldset %}
        {% include '@ec-europa/ecl-forms-legends' with { 'extra_class': 'ecl-form-legend--level-1', 'content': 'Group' } %}
        {% embed '@ec-europa/ecl-forms-fieldsets' %}
          {% block fieldset %}
            {% include '@ec-europa/ecl-forms-legends' with { 'extra_class': 'ecl-form-legend--level-2', 'content': 'Subgroup 1' } %}
            {% embed '@ec-europa/ecl-forms-form-groups' %}
              {% block form_group %}
                {% include '@ec-europa/ecl-forms-labels' with { 'for_attribute': 'field-ID-3', 'label': 'Text Input - disabled' } %}
                {% include '@ec-europa/ecl-forms-help-blocks' with { 'content': 'This is some placeholder help text', 'is_disabled': true } %}
                {% include '@ec-europa/ecl-forms-text-inputs' with {
                  'id' : 'field-ID-3',
                  'name': 'field-name-3',
                  'type': 'text',
                  'isDisabled': true,
                  'extraAttributes': [
                    { 'name': 'placeholder', 'value': 'Some placeholder text.' }
                  ]
                } %}
              {% endblock %}
            {% endembed %}
            {% embed '@ec-europa/ecl-forms-form-groups' %}
              {% block form_group %}
                {% include '@ec-europa/ecl-forms-labels' with { 'for_attribute': 'field-ID-4', 'label': 'Text Input - error on a field' } %}
                {% include '@ec-europa/ecl-forms-help-blocks' with { 'content': 'This is some placeholder help text', 'has_error': true } %}
                {% include '@ec-europa/ecl-forms-text-inputs' with {
                  'id' : 'field-ID-4',
                  'name': 'field-name-4',
                  'type': 'text',
                  'hasError': true,
                  'extraAttributes': [
                    { 'name': 'placeholder', 'value': 'Some placeholder text.' }
                  ]
                } %}
                {% include '@ec-europa/ecl-forms-feedback-messages' with {
                  'title': 'Some feedback message',
                  'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam urna, elementum eget ultrices non, efficitur quis lectus. Donec mollis felis ac felis tempus mattis',
                  'has_error': true
                } %}
              {% endblock %}
            {% endembed %}
          {% endblock %}
        {% endembed %}
        {% embed '@ec-europa/ecl-forms-fieldsets' %}
          {% block fieldset %}
            {% include '@ec-europa/ecl-forms-legends' with { 'extra_class': 'ecl-form-legend--level-2', 'content': 'Subgroup 2' } %}
            {% embed '@ec-europa/ecl-forms-form-groups' %}
              {% block form_group %}
                {% include '@ec-europa/ecl-forms-labels' with { 'for_attribute': 'field-ID-5', 'label': 'Text Input - disabled' } %}
                {% include '@ec-europa/ecl-forms-help-blocks' with { 'content': 'This is some placeholder help text', 'is_disabled': true } %}
                {% include '@ec-europa/ecl-forms-text-inputs' with {
                  'id' : 'field-ID-5',
                  'name': 'field-name-5',
                  'type': 'text',
                  'isDisabled': true,
                  'extraAttributes': [
                    { 'name': 'placeholder', 'value': 'Some placeholder text.' }
                  ]
                } %}
              {% endblock %}
            {% endembed %}
          {% endblock %}
        {% endembed %}
      {% endblock %}
    {% endembed %}
  {% endblock %}
{% endembed %}
 
/* No context defined for this component. */
 
<form class="ecl-form">

  <fieldset class="ecl-fieldset">

    <legend class="ecl-form-legend ecl-form-legend--level-1">Personal information</legend>

    <div class="ecl-form-group">

      <label class="ecl-form-label" for="field-ID-1">First name</label>

      <input type="text" class="ecl-text-input" id="field-ID-1" name="field-name-1" placeholder="Some placeholder text." />
    </div>

    <div class="ecl-form-group">

      <label class="ecl-form-label" for="field-ID-2">Last name</label>

      <input type="text" class="ecl-text-input" id="field-ID-2" name="field-name-2" placeholder="Some placeholder text." />
    </div>
  </fieldset>

  <fieldset class="ecl-fieldset">

    <legend class="ecl-form-legend ecl-form-legend--level-1">Group</legend>

    <fieldset class="ecl-fieldset">

      <legend class="ecl-form-legend ecl-form-legend--level-2">Subgroup 1</legend>

      <div class="ecl-form-group">

        <label class="ecl-form-label" for="field-ID-3">Text Input - disabled</label>

        <p class="ecl-help-block ecl-help-block--disabled">This is some placeholder help text</p>

        <input type="text" class="ecl-text-input" id="field-ID-3" name="field-name-3" disabled placeholder="Some placeholder text." />
      </div>

      <div class="ecl-form-group">

        <label class="ecl-form-label" for="field-ID-4">Text Input - error on a field</label>

        <p class="ecl-help-block ecl-help-block--has-error">This is some placeholder help text</p>

        <input type="text" class="ecl-text-input ecl-text-input--has-error" id="field-ID-4" name="field-name-4" placeholder="Some placeholder text." />

        <div class="ecl-feedback-message ecl-feedback-message--error" role="alert">
          <div class="ecl-feedback-message__title" role="heading">Some feedback message</div>
          <p class="ecl-feedback-message__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam urna, elementum eget ultrices non, efficitur quis lectus. Donec mollis felis ac felis tempus mattis</p>
        </div>
      </div>
    </fieldset>

    <fieldset class="ecl-fieldset">

      <legend class="ecl-form-legend ecl-form-legend--level-2">Subgroup 2</legend>

      <div class="ecl-form-group">

        <label class="ecl-form-label" for="field-ID-5">Text Input - disabled</label>

        <p class="ecl-help-block ecl-help-block--disabled">This is some placeholder help text</p>

        <input type="text" class="ecl-text-input" id="field-ID-5" name="field-name-5" disabled placeholder="Some placeholder text." />
      </div>
    </fieldset>
  </fieldset>
</form>
  • Handle: @ec-europa/ecl-templates-forms
  • Tags: template
  • Preview:
  • Filesystem Path: framework/templates/ecl-templates-forms/ecl-templates-forms.twig