fieldset

// src/components/fsk/form/fieldset/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /fsk/form/fieldset
additionalProperties: false
properties:
  attributes:
    type: object
  children:
    type: string
    format: html
  description:
    type: object
    properties:
      content:
        type: string
        format: html
  errors:
    type: string
    format: html
  legend:
    type: object
    properties:
      title:
        type: string
    required:
      - title
  legend_span:
    type: object
  prefix:
    type: string
  required:
    type: boolean
  suffix:
    type: string
required:
  - children

// src/components/fsk/form/fieldset/mocks.yaml

$hidden: true
attributes:
  $drupal: true
legend:
  title: A group of form elements
  attributes:
    $drupal: true
legend_span:
  attributes:
    $drupal: true
description:
  attributes:
    $drupal: true
$variants:
  - $name: default
    children:
      $render:
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#input'
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#select'
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#textarea'
  - $name: complete
    errors: <p>errors</p>
    description:
      content: >-
        <p>Sunt consequat non irure nulla. Aliquip pariatur ex nulla ea deserunt
        Lorem culpa. Laboris sunt ullamco qui dolor. Lorem tempor incididunt
        incididunt excepteur irure tempor do veniam ipsum labore eu.</p>
    prefix: >-
      Magna irure dolore ullamco anim nisi ipsum esse velit ea occaecat anim
      aliqua.
    suffix: Non Lorem eu cillum quis et.
    children:
      $render:
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#input'
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#select'
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#textarea'

// src/components/fsk/form/fieldset/fieldset.html.twig

<fieldset{{ attributes ? attributes|without("class") : "" }} class="FskFieldset {{ attributes.class }}">
  <legend{{ legend.attributes ? legend.attributes|without("class") : "" }} class="FskFieldset-legend">
    <span{{ legend_span.attributes ? legend_span.attributes|without("class") : "" }} class="FskFieldset-label">{{ legend.title }}</span>
  </legend>
  <div class="FskFieldset-wrapper">
    {% if prefix %}
      <span class="FskFieldset-prefix">{{ prefix }}</span>
    {% endif %}
    {{ children }}
    {% if suffix %}
      <span class="FskFieldset-suffix">{{ suffix }}</span>
    {% endif %}
    <div class="FskFieldset-errorMessage" role="alert">{% if errors %}{{ errors }}{% endif %}</div>
    {% if description.content %}
      <div{{ description.attributes ? description.attributes|without("class") : "" }} class="FskFieldset-description">{{ description.content }}</div>
    {% endif %}
  </div>
</fieldset>