{namespace form=Neos\Form\ViewHelpers}
<f:validation.results for="{element.identifier}">
	<li class="{f:if(condition: validationResults.flattenedErrors, then: ' error')}{f:if(condition: "{element.type} == 'Neos.Form:Checkbox'", then: ' c-input-group__checkbox')}{f:if(condition: "{element.type} == 'Neos.Form:SingleSelectRadiobuttons' || {element.type} == 'Neos.Form:MultipleSelectCheckboxes'", then: ' c-input-group__multi-checkbox', else:'')}"<f:if condition="{element.rootForm.renderingOptions.previewMode}"> data-element="{form:form.formElementRootlinePath(renderable:element)}"</f:if>>
		<f:if condition="{element.type} != 'Neos.Form:Checkbox'">
			<label for="{element.uniqueIdentifier}">{element -> form:translateElementProperty(property: 'label') -> f:format.nl2br()}<f:if condition="{element.required}"><f:render partial="Neos.Form:Field/Required" /></f:if></label>
		</f:if>

		<f:render section="field" />
		<f:if condition="{validationResults.flattenedErrors}">
			<span class="c-input__validation">
				<f:for each="{validationResults.errors}" as="error">
					{error -> f:translate(id: '{error.code}', arguments: error.arguments, package: '{element.renderingOptions.validationErrorTranslationPackage}', source: 'ValidationErrors')}
					<br />
				</f:for>
			</span>
		</f:if>
		<f:if condition="{element.properties.elementDescription}">
			<span class="help-block">{element -> form:translateElementProperty(property: 'elementDescription')}</span>
		</f:if>
	</li>
</f:validation.results>
