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

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/input
      $ref: elements/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/input
      $ref: elements/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/input
      $ref: elements/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/input
      $ref: elements/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-upload/input
      $ref: elements/file-upload/input
      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: Textarea
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/label
      for: form-element-input6
    children:
      $tpl: elements/textarea
      $ref: elements/textarea
      id: form-element-input6
  - $name: Checkbox
    type: checkbox
    label:
      $tpl: elements/form-element/label
      $ref: elements/form-element/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
      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
		{% if errors and errors|length > 0 %} FormElement--error{% endif %}
		{% if type == "checkbox" or type == "radio" %}
			Option
			{{ type|capitalize }}
		{% endif %}
		{{ classes|join(" ") }}
	">
	{% 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 %}
	{% if errors %}
		<div class="FormElement-error">
			{% include "@elements/error/error.twig" with {
				content: errors,
			} only %}
		</div>
	{% endif %}
	{% if description %}
		<p{{ description_attributes }} class="FormElement-description">
			{{ description }}
		</p>
	{% endif %}
</div>

form-element

Information

Files

Variants