layout-fieldset

Information

Folder
src/components/patterns/form/layout/layout-fieldset

Files

Schema
Mocks
Template
// src/components/patterns/form/layout/layout-fieldset/layout-fieldset.html.twig

<div class="LayoutFieldset u-grid{% if js_form_item %} js-form-item{% endif %}{% if full_width %} LayoutFieldset--fullWidth{% endif %}{% if custom_validation %} js-FormElement--fieldset{% endif %}{% if page_child %} u-pageMainChild{% endif %}{% if content_with_teaser %} LayoutFieldset--contentWithTeaser{% endif %}">
  {% if custom_validation %}
    <div class="LayoutFieldset-errorMessage u-typo-copy-small-bold js-LayoutFieldset-errorMessage{% if not backend_error %} is-hidden{% endif %}" role="alert">{{ custom_validation }}</div>
  {% endif %}
  <fieldset {{ attributes|without("class") }} class="LayoutFieldset-fieldset {{ attributes.class }}">
    <legend class="LayoutFieldset-legend {% if full_width or content_with_teaser %} u-hiddenVisually{% endif %} {{ legend.attributes.class }}">
      <span class="LayoutFieldset-label u-typo-headline4{% if required %} js-form-required form-required{% endif %}">{{ legend.title }}</span>
    </legend>
    <div class="LayoutFieldset-wrapper{% if full_width %} LayoutFieldset-wrapper--fullWidth{% endif %}">
      {{ children }}
    </div>
  </fieldset>
</div>

Variants

default
Open

default mock data

Raw
Resolved
Full width
Open

Full width mock data

Raw
Resolved