fieldset

Fieldsets should be used to wrap multiple different form elements which belong together in terms of content. E.g. form elements describing a delivery address should be wrapped in one fieldset and form elements describing an invoice address should be wrapped in another fieldset.

Information

Folder
src/components/elements/form/fieldset

Files

Schema 
// 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
  layout:
    type: string
    enum:
      - row
      - col
  is_title_hidden:
    type: boolean
  span:
    type: number
    minimum: 1
    maximum: 12
  start:
    type: number
    minimum: 1
    maximum: 12
Mocks 
// 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
  - $name: Select
    layout: row
    children:
      $render:
        - $tpl: elements/form-element
          $ref: elements/form-element#select
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: form-element-select-1
          children:
            $tpl: elements/select
            $ref: elements/select
            id: form-element-select-1
        - $tpl: elements/form-element
          $ref: elements/form-element#select
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: form-element-select-2
          children:
            $tpl: elements/select
            $ref: elements/select
            id: form-element-select-2
        - $tpl: elements/form-element
          $ref: elements/form-element#select
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: form-element-select-3
          children:
            $tpl: elements/select
            $ref: elements/select
            id: form-element-select-3
  - $name: Radios
    layout: row
    is_title_hidden: true
    children:
      $render:
        - $tpl: elements/form-element
          $ref: elements/form-element#radio
          children:
            $tpl: elements/form-element/option
            $ref: elements/form-element/option#radio
            id: options-input6
            value: input6
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: options-input6
        - $tpl: elements/form-element
          $ref: elements/form-element#radio
          children:
            $tpl: elements/form-element/option
            $ref: elements/form-element/option#radio
            id: options-input7
            value: input7
          label:
            $tpl: elements/form-element/label
            $ref: elements/form-element/label
            for: options-input7
Template 
// src/components/elements/form/fieldset/fieldset.twig

<fieldset{{ attributes }}
	class="Fieldset js-Fieldset {{ classes|join(" ") }}"
	style="{%- if span %}--span: {{ span }}; {% endif -%}{%- if start %}--start: {{ start }};{% endif -%}"
>
	<legend{{ legend_attributes }} class="Fieldset-legend">
		<span{{ title_attributes }} class="Fieldset-label u-typo-TextM  {% if is_title_hidden %} u-hiddenVisually{% endif %}">{{ title }}</span>
	</legend>
	<div class="Fieldset-wrapper Fieldset-wrapper--{{ layout|default("col") }}">
		{% if prefix %}
			<span class="Fieldset-prefix u-typo-TextS">{{ prefix }}</span>
		{% endif %}
		{{ children }}
		{% if suffix %}
			<span class="Fieldset-suffix u-typo-TextS">{{ suffix }}</span>
		{% endif %}
		<div class="Fieldset-error js-Fieldset-error u-typo-TextS">
			{% if errors %}
				{% include "@elements/error/error.twig" with {
					content: errors,
				} only %}
			{% endif %}
		</div>
		{% if description %}
			<p{{ description_attributes }} class="Fieldset-description u-typo-TextS">{{ description }}</p>
		{% endif %}
	</div>
</fieldset>

Variants

default
Open
A group of form elements
complete
Open
A group of form elements
Magna irure dolore ullamco anim nisi ipsum esse velit ea occaecat anim aliqua.
Non Lorem eu cillum quis et.

This is an error message.

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.

Select
Open
A group of form elements
Radios
Open
A group of form elements