TYPO3 Backend Forms and Inputs

Forms and Input Elements used in TYPO3's backend

Wrap the form with the following:

<div class="typo3-TCEforms"> ... </div>

Fieldset

<fieldset class="form-section">
  <h4 class="form-section-headline"> </h4>
  ...
</fieldset>

Columns (bootstrap)

<div class="row">
  <div class="form-group col col-sm-6 col-md-4"> </div>
  <div class="form-group col col-sm-6 col-md-4"> </div>
  <div class="form-group col col-sm-6 col-md-4"> </div>
</div

Labels

<label class="form-label"> Label Name </label>

Select

<f:form.select name="name" class="form-select" options="{categories}" optionLabelField="name" />

Textarea

 <f:form.textarea class="form-control" rows="10" property="description" />

Input

<f:form.textfield property="name" class="form-control" additionalAttributes="{required: required}" />

Checkbox (Toggle)

<div class="form-group">
    <label class="form-label"
        for="appointments_label_weekstarts_on_monday">
        Week starts on
    </label>
    <div class="form-check form-switch">
        <f:form.checkbox id="appointments_label_weekstarts_on_monday"
            property="weekstartsOnMonday"
            class="form-check-input"
            value="1" />
        <div class="form-check-label">My label</div>
    </div>
</div>

Small text on the bottom of the field

 <div class="form-text">This is a text which is displayed after field in small size</div>