Ad

TYPO3 9/10, Tx_form Hide Label Or Add A Css Class

- 1 answer

is there a possibility to add a css class to field labels? I need to hide labels of fields only visually. I found a possibility to add class names to the field itself or the container which contains the field but not the label or the container which contains label and field.

Thanks!

Ad

Answer

Not by default. But you can add a custom property to the desired field(s) in your form definition.

Form field labels are set globally in the Fluid partial "Field.html". This is convenient: we only need to adjust a single template to support all fields. Extend the label's class attribute with the condition below.

File "yourContactForm.form.yaml":

identifier: someTextField
label: 'Label, hidden but available to screen readers'
type: Text
properties:
  hideLabelVisually: 1

File "Partials/Field/Field.html":

<f:if condition="{doNotShowLabel} != 1">
  <label class="control-label {f:if(condition: element.properties.hideLabelVisually, then: ' visually-hidden')}"
  for="{element.uniqueIdentifier}">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></label>
</f:if>
Ad
source: stackoverflow.com
Ad