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

Mocks

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>