<fieldset id="field-90939-62492" class="field">

    <legend class="field__label">
        <span class="label">Checkboxen</span>
    </legend>

    <div class="field__controls" data-field-controls-flow="columns">
        <div class="field__control">

            <div class="field__control-inner">

                <label id="field-90939-62492-control-0-wrapper" class="checkbox" for="field-90939-62492-control-0">
                    <input class="checkbox__input" id="field-90939-62492-control-0" name="checkbox[]" value="1" required aria-required="true" aria-checked="false" type="checkbox" />

                    <span class="checkbox__box">
                        <svg class="icon icon--check checkbox__box-icon" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.dcaca1c147.svg#check"></use>
                        </svg> </span>

                    <span class="checkbox__text">Option 1</span>
                </label>
            </div>

        </div>
        <div class="field__control">

            <div class="field__control-inner">

                <label id="field-90939-62492-control-1-wrapper" class="checkbox" for="field-90939-62492-control-1">
                    <input class="checkbox__input" id="field-90939-62492-control-1" name="checkbox[]" value="2" required aria-required="true" aria-checked="false" type="checkbox" />

                    <span class="checkbox__box">
                        <svg class="icon icon--check checkbox__box-icon" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.dcaca1c147.svg#check"></use>
                        </svg> </span>

                    <span class="checkbox__text">Option 2</span>
                </label>
            </div>

        </div>
        <div class="field__control">

            <div class="field__control-inner">

                <label id="field-90939-62492-control-2-wrapper" class="checkbox" for="field-90939-62492-control-2">
                    <input class="checkbox__input" id="field-90939-62492-control-2" name="checkbox[]" value="3" required aria-required="true" aria-checked="false" type="checkbox" />

                    <span class="checkbox__box">
                        <svg class="icon icon--check checkbox__box-icon" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.dcaca1c147.svg#check"></use>
                        </svg> </span>

                    <span class="checkbox__text">Option 3</span>
                </label>
            </div>

        </div>
    </div>

</fieldset>
{% set id = id ??? html_id('field') %}
{% set wrap = wrap ?? true %}
{% set controls = controls is not list ? [controls] : controls %}
{% set multiple = controls|length > 1 %}
{% set tag = multiple ? 'fieldset' : 'div' %}
{% set labelPosition = labelPosition ?? 'above' %}
{% set subfieldLabelPosition = subfieldLabelPosition ?? 'above' %}
{% set instructionsPosition = instructionsPosition ?? 'below' %}
{% set descriptionId = 'instructions' | namespaceInputId(id) %}
{% set error = error ?? false %}
{% set errorId = 'error' | namespaceInputId(id) %}
{% set information = information ?? false %}
{% set informationId = informationId ??? ('information' | namespaceInputId(id)) %}

{% set controlIds = controls | map(
  (control, index) => control.configuration.id ?? control.id ?? ("control-#{index}" | namespaceInputId(id))
) %}

{% set describedBy = html_classes({
  (descriptionId): instructions ?? false,
  (errorId): error,
  (informationId): information,
}) %}

{% macro label(text, for = null, hidden = false) %}
  {% set labelTag = for ? 'label' : 'legend' %}

  <{{ labelTag }} {{ html_attributes({
    class: ['field__label', hidden ? 'u-hidden-visually'],
    for: for,
  }) }}>
    {% include '@label' with { text: text } only %}
  </{{ labelTag }}>
{% endmacro %}

{% macro instructions(id, instructions) %}
  <div class="field__instructions" id="{{ id }}">
    {{ instructions | componentize(inline_only=true) }}
  </div>
{% endmacro %}

<{{ tag }} {{ html_attributes({
  id: id,
  class: 'field',
}, attrs ?? {}) }}>
  {% if labelPosition == 'above' or labelPosition == 'hidden' %}
    {{ _self.label(
      text: label,
      for: not multiple ? controlIds | first,
      hidden: labelPosition == 'hidden',
    ) }}
  {% endif %}

  {% if instructions|default and instructionsPosition == 'above-input' %}
    {{ _self.instructions(
      id: descriptionId,
      instructions: instructions,
    ) }}
  {% endif %}

  {% for name, value in hiddenInputs|default %}
    {{ hiddenInput(name, value.value ?? value, value.attrs ?? {}) }}
  {% endfor %}

  <div class="field__controls" data-field-controls-flow="{{ flow ?? 'columns' }}">
    {% for control in controls %}
      <div class="field__control">
        {% set controlId = controlIds[loop.index0] %}

        {% if control.label|default and (subfieldLabelPosition == 'above' or subfieldLabelPosition == 'hidden') %}
          <div class="field__control-label{{ subfieldLabelPosition == 'hidden' ? ' u-hidden-visually' }}" for="{{ controlId }}">
            {% include '@label' with { text: control.label } only %}
          </div>
        {% endif %}

        <div class="field__control-inner">
          {% if control.component|default %}
            {% include control.component with control.configuration | merge({
              id: controlId,
              describedBy: describedBy,
              invalid: error,
            }) only %}
          {% elseif control.html|default %}
            {{ control.html }}
          {% endif %}
        </div>

        {% if control.label|default and (subfieldLabelPosition == 'below') %}
          <div class="field__control-label" for="{{ controlId }}">
            {% include '@label' with { text: control.label } only %}
          </div>
        {% endif %}
      </div>
    {% endfor %}
  </div>

  {% if labelPosition == 'below' %}
    {{ _self.label(
      text: label,
      for: not multiple ? controlIds | first,
    ) }}
  {% endif %}

  {% if error %}
    <div class="field__error" id="{{ errorId }}">
      {% include '@notice' with {
        type: 'error',
        text: error,
      } only %}
    </div>
  {% endif %}

  {% if information or informationAttrs|default %}
    <div {{ html_attributes({ class: 'field__information', id: informationId }, informationAttrs ?? {}) }}>
      {% include '@notice' with {
        type: 'info',
        text: information,
      } only %}
    </div>
  {% endif %}

  {% if instructions|default and instructionsPosition == 'below' %}
    {{ _self.instructions(
      id: descriptionId,
      instructions: instructions,
    ) }}
  {% endif %}
</{{ tag }}>
{
  "label": "Checkboxen",
  "instructions": "Das ist eine Beschreibung",
  "instructionsPosition": "above",
  "controls": [
    {
      "component": "@checkbox",
      "configuration": {
        "value": 1,
        "text": "Option 1",
        "required": true,
        "name": "checkbox[]"
      }
    },
    {
      "component": "@checkbox",
      "configuration": {
        "value": 2,
        "text": "Option 2",
        "required": true,
        "name": "checkbox[]"
      }
    },
    {
      "component": "@checkbox",
      "configuration": {
        "value": 3,
        "text": "Option 3",
        "required": true,
        "name": "checkbox[]"
      }
    }
  ]
}
  • Content:
    .field {
      background-color: var(--field-background-color, var(--color-gray-100));
      border-radius: var(--field-border-radius, var(--border-radius-medium));
      display: grid;
      grid-template-columns: 100%;
      padding-block: var(--field-padding-block, 1.6rem);
      padding-inline: var(--field-padding-inline, 1.6rem);
      row-gap: var(--field-row-gap, 1.2rem);
    
      &:has(> .field__error) {
        outline: 2px solid var(--color-red-500);
      }
    }
    
    .field__instructions {
      color: var(--field-instructions-color, var(--color-gray-800));
      font-size: var(--field-instructions-font-size, var(--font-size-small));
      line-height: var(--field-instructions-line-height, var(--line-height-regular));
    }
    
    .field__error {
      color: var(--color-red-600);
      font-weight: var(--font-weight-bold);
    }
    
    .field__information {
      padding-block: var(--field-information-padding-block, 1rem);
      padding-inline: var(--field-information-padding-inline, 1.6rem);
    }
    
    .field__label {
      float: left;
      inline-size: 100%;
    }
    
    .field__controls {
      clear: both;
      column-gap: var(--grid-gap);
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      row-gap: var(--field-controls-row-gap, 0.8rem);
    
      &:has(.field__control-label) {
        row-gap: var(--field-controls-row-gap, 1.6rem);
      }
    
      &:is([data-field-controls-flow='row']) {
        flex-direction: row;
        flex-wrap: wrap;
      }
    
      &:is([data-field-controls-flow='double-column']) {
        --_field-controls-min-column-size: var(--field-controls-min-column-size, 20rem);
    
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--_field-controls-min-column-size), 1fr));
        min-inline-size: min(var(--grid-min-inner-inline-size), calc(var(--_field-controls-min-column-size) * 2 + var(--grid-gap)));
      }
    }
    
    .field__control {
      flex-shrink: 0;
    }
    
    .field__control-label {
      --label-font-weight: var(--font-weight-regular);
    
      margin-block-end: var(--field-control-row-gap, 0.8rem);
    }
    
  • URL: /components/raw/field/field.scss
  • Filesystem Path: src/components/3-molecules/field/field.scss
  • Size: 1.9 KB

No notes defined.