Adding labels with the label-helper

The label-helper makes it easier for Admins to build reusable Templates and conform to accessibility standards.

The label-helper will check in the configured Entry Metadata Configuration and Validation if the field is required. It will mark the fields with an asterisk and bold text, to indicate that it is required to submit the form. It is also possible to set the required attribute of the input to "true" to achieve the same behaviour.

Example

XML

...
	<div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom">
		{{label-helper value=editModel.Title label="Titel:"}}
	</div>
	<div data-col="sm-8 xs-12 valign-center" class="editable-field">
		{{input value=editModel.Title placeholder=editModel.TitlePlaceholder type="text"}}
	</div>
...

Example using Custom Fields

XML

...
<div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom">
   {{label-helper customField="ABC/METADATA" label="Custom Metadata:"}}
</div>
<div data-col="sm-8 xs-12 valign-center" class="editable-field">
	{{editable-custom-field editable=true model=editModel customField="ABC/METADATA"}}
</div>
...
<div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom">
	{{label-helper customField="ABC/METADATAB" label="Custom Metadata B:"}}
</div>
<div data-col="sm-8 xs-12 valign-center" class="editable-field">
	{{combo-box model=editModel customField="ABC/METADATAB" source="['Value1', 'Value2', 'Value3']"}}
</div>
...

Adding Custom Styles

You can customize the Style by adding your own CSS:

XML

// hide asterisk
label.is-required:after {
    content: '' !important;
}

// change color if field is empty / invalid
label.is-required.is-empty, label.is-required.is-invalid {
	color: red !important;
}