fieldset

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

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/fieldset
additionalProperties: false
required:
  - children
  - title
properties:
  attributes:
    type: string
  children:
    type: string
    format: html
  description:
    type: string
    format: html
  errors:
    type: string
    format: html
  title:
    type: string
  prefix:
    type: string
  suffix:
    type: string

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

$hidden: true
title: A group of form elements
$variants:
  - $name: default
    children:
      $render:
        - $tpl: elements/form-element
          $ref: elements/form-element#input
        - $tpl: elements/form-element
          $ref: elements/form-element#select
        - $tpl: elements/form-element
          $ref: elements/form-element#textarea
  - $name: complete
    errors: <p>This is an error message.</p>
    description: >-
      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.
    prefix: >-
      Magna irure dolore ullamco anim nisi ipsum esse velit ea occaecat anim
      aliqua.
    suffix: Non Lorem eu cillum quis et.
    children:
      $render:
        - $tpl: elements/form-element
          $ref: elements/form-element#input
        - $tpl: elements/form-element
          $ref: elements/form-element#select
        - $tpl: elements/form-element
          $ref: elements/form-element#textarea

// src/components/elements/form/fieldset/fieldset.twig

<fieldset{{ attributes }} class="Fieldset {{ classes|join(" ") }}">
	<legend{{ legend_attributes }} class="Fieldset-legend">
		<span{{ title_attributes }} class="Fieldset-label">{{ title }}</span>
	</legend>
	<div class="Fieldset-wrapper">
		{% if prefix %}
			<span class="Fieldset-prefix">{{ prefix }}</span>
		{% endif %}
		{{ children }}
		{% if suffix %}
			<span class="Fieldset-suffix">{{ suffix }}</span>
		{% endif %}
		{% if errors %}
			<div class="Fieldset-error">
				{% include "@elements/error/error.twig" with {
					content: errors,
				} only %}
			</div>
		{% endif %}
		{% if description %}
			<p{{ description_attributes }} class="Fieldset-description">{{ description }}</p>
		{% endif %}
	</div>
</fieldset>