form-element

This component is the wrapper for

  • a label,
  • an input, a select, a textarea, a checkbox or a radio button,
  • error messages,
  • additional information which belongs to this form element.

Since inputs, selects, textareas, checkboxes and radio buttons should never be used without a label, we should always use this component to ensure accessibility.

Information

Folder
src/components/elements/form-element

Files

Schema 
// src/components/elements/form-element/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/form-element
additionalProperties: false
required:
  - children
properties:
  attributes:
    type: string
  children:
    type: string
    format: html
  description:
    type: string
  description_attributes:
    type: string
  label:
    type: string
    format: html
  label_display:
    type: string
    enum:
      - after
  prefix:
    type: string
  suffix:
    type: string
  disabled:
    type: boolean
  errors:
    type: string
    format: html
  title_display:
    type: string
    enum:
      - after
      - before
  type:
    type: string
  span:
    type: number
    minimum: 1
    maximum: 12
  start:
    type: number
    minimum: 1
    maximum: 12
  extra_gap:
    type: string
    enum:
      - small
      - medium
      - large
  centered:
    type: boolean
Mocks 
// src/components/elements/form-element/mocks.yaml

$hidden: true
label:
  $tpl: elements/form-element/label
  $ref: elements/form-element/label
$variants:
  - $name: Input
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input1
    children:
      $tpl: elements/form-element/input
      $ref: elements/form-element/input
      id: form-element-input1
  - $name: Input with description
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input2
    children:
      $tpl: elements/form-element/input
      $ref: elements/form-element/input
      id: form-element-input2
    description: This is a description.
  - $name: Input invalid
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input3
    children:
      $tpl: elements/form-element/input
      $ref: elements/form-element/input#invalid
      id: form-element-input3
    errors: <p>This is an error message.</p>
  - $name: Input invalid with description
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input4
    children:
      $tpl: elements/form-element/input
      $ref: elements/form-element/input#invalid
      id: form-element-input4
    errors: <p>This is an error message.</p>
    description: This is a description.
  - $name: File Input with description
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input-file
    children:
      $tpl: elements/file-uploader
      $ref: elements/file-uploader
      id: form-element-input-file
    description: This is a description.
  - $name: Select
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input5
    children:
      $tpl: elements/select
      $ref: elements/select
      id: form-element-input5
  - $name: Date
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-date
    children:
      $tpl: elements/form-element/input
      $ref: elements/form-element/input
      type: date
      id: form-element-date
  - $name: Textarea
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input6
    children:
      $tpl: elements/form-element/textarea
      $ref: elements/form-element/textarea
      id: form-element-input6
  - $name: Checkbox
    type: checkbox
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label#long-label
      for: form-element-input7
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#checkbox
      id: form-element-input7
  - $name: Checkbox invalid
    type: checkbox
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input8
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#checkbox-invalid
      id: form-element-input8
    errors: <p>This is an error message.</p>
  - $name: Checkbox checked
    type: checkbox
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input9
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#checkbox-checked
      id: form-element-input9
  - $name: Checkbox disabled
    type: checkbox
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input10
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#checkbox-disabled
      id: form-element-input10
  - $name: Checkbox invalid and checked
    type: checkbox
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input11
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#checkbox-invalid-and-checked
      id: form-element-input11
    errors: <p>This is an error message.</p>
  - $name: Checkbox invalid and disabled
    type: checkbox
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input12
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#checkbox-invalid-and-disabled
      id: form-element-input12
    errors: <p>This is an error message.</p>
  - $name: Checkbox checked and disabled
    type: checkbox
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input13
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#checkbox-checked-and-disabled
      id: form-element-input13
  - $name: Checkbox checked and disabled and invalid
    type: checkbox
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input14
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#checkbox-checked-and-disabled-and-invalid
      id: form-element-input14
    errors: <p>This is an error message.</p>
  - $name: Radio
    type: radio
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label#long-label
      for: form-element-input15
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#radio
      id: form-element-input15
  - $name: Radio invalid
    type: radio
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input16
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#radio-invalid
      id: form-element-input16
    errors: <p>This is an error message.</p>
  - $name: Radio checked
    type: radio
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input17
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#radio-checked
      id: form-element-input17
  - $name: Radio disabled
    type: radio
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input18
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#radio-disabled
      id: form-element-input18
  - $name: Radio invalid and checked
    type: radio
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input19
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#radio-invalid-and-checked
      id: form-element-input19
    errors: <p>This is an error message.</p>
  - $name: Radio invalid and disabled
    type: radio
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input20
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#radio-invalid-and-disabled
      id: form-element-input20
    errors: <p>This is an error message.</p>
  - $name: Radio checked and disabled
    type: radio
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input21
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#radio-checked-and-disabled
      id: form-element-input21
  - $name: Radio checked and disabled and invalid
    type: radio
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input22
    label_display: after
    children:
      $tpl: elements/form-element/option
      $ref: elements/form-element/option#radio-checked-and-disabled-and-invalid
      id: form-element-input22
    errors: <p>This is an error message.</p>
  - $name: Submit
    label: ''
    children:
      $tpl: elements/button
      $ref: elements/button#primary-button
      type: submit
Template 
// src/components/elements/form-element/form-element.twig

{% set label_display = label_display|default("before") %}
<div{{ attributes }}
	class="FormElement
		js-FormElement
		{% if extra_gap %} FormElement--{{ extra_gap }}Gap{% endif %}
		{% if centered %} FormElement--centered{% endif %}
		{%- if errors and errors|length > 0 %} FormElement--error{% endif -%}
		{%- if type == "checkbox" or type == "radio" %}
			Option
			{{ type|capitalize }}
		{% endif -%}
		{{ classes|join(" ") }}"
	style="{%- if span %}--span: {{ span }}; {% endif -%}{%- if start %}--start: {{ start }};{% endif -%}"
>
	{% if label_display == "before" %}
		{{ label }}
	{% endif %}
	{% if prefix is not empty %}
		<span class="FormElement-prefix">{{ prefix }}</span>
	{% endif %}
	{{ children }}
	{% if suffix is not empty %}
		<span class="FormElement-suffix">{{ suffix }}</span>
	{% endif %}
	{% if label_display == "after" %}
		{{ label }}
	{% endif %}
	<div class="FormElement-error js-FormElement-error u-typo-TextS{% if not errors %} is-hidden{% endif %}">
		{% if errors %}
			{% include "@elements/error/error.twig" with {
				content: errors,
			} only %}
		{% endif %}
	</div>
	{% if description %}
		<p{{ description_attributes }} class="FormElement-description u-typo-TextS">
			{{ description }}
		</p>
	{% endif %}
</div>

Variants

Input
Open
Input with description
Open

This is a description.

Input invalid
Open

This is an error message.

Input invalid with description
Open

This is an error message.

This is a description.

File Input with description
Open

fileUploader.description

fileUploader.sizeWarning

This is a description.

Select
Open
Date
Open
Textarea
Open
Checkbox
Open
Checkbox invalid
Open

This is an error message.

Checkbox checked
Open
Checkbox disabled
Open
Checkbox invalid and checked
Open

This is an error message.

Checkbox invalid and disabled
Open

This is an error message.

Checkbox checked and disabled
Open
Checkbox checked and disabled and invalid
Open

This is an error message.

Radio
Open
Radio invalid
Open

This is an error message.

Radio checked
Open
Radio disabled
Open
Radio invalid and checked
Open

This is an error message.

Radio invalid and disabled
Open

This is an error message.

Radio checked and disabled
Open
Radio checked and disabled and invalid
Open

This is an error message.

Submit
Open