How to make a Input field in AEM/CRX required?

since our AEM guy is out of office at the moment, i need to fix something in our CRX. I have a form with a checkbox in my website, where authors can set a text next to it. Now i am trying to add the functionality to set this checkbox to be required from the authoring dialog.

I was able to find a textfield which has this property in authoring, but in the html in CRX i only see the code required=${required}, where other fields like label are shown like ${properties.label} and have a corresponding node in CRX. I don't understand how the required is implemented and need help here.

I already tried to add required=${required} to my checkbox input markup, but this did not work, since in the authoring dialog there still was no checkbox/switch to make the field required (which was kinda expected).

this is the line in the markup which should be required if the author sets it to required in the authoring dialog:

<input required="${required}" type="checkbox" name="campaignform-termsofservice"/>

this is the whole html of the checkbox i want to be able to make required:

<div data-sly-test="${!empty}" class="form__text">
<label class="maut-checkbox--container">

    <input required="${required}" type="checkbox" name="campaignform-termsofservice"/>
    <span class="maut-checkbox--checkmark"></span>

    <span>${properties.checkboxtext @context='html'}</span>
    <div><a href="${properties.tncLink @ extension='html'}">${properties.tncText}</a></div>
    <div style="color:white;" class="authoring-error" data-sly-test="${wcmmode.edit && !tncDate.tncLinkActivationDate}">${'b2x.maut.campaignform.dialog.tos.activationmessage' @ i18n, source='user'}</div>
    <input type="hidden" name="maut.field.tnc" value="${tncDate.tncLinkActivationDate}" />
</label>
</div>

Now i only need to figure out how i can show the option to set it to required in the authoring dialog.

Thanks in advance

Solution

If you want to know how the required=${required} is implemented then first of all in html of the component look for something like data-sly-use.required. This will have a expression like =com.project.yourProject.className or some js file.

Lets discuss about the java case which is the most common way. What data-sly-use does is that it creates an object of the class that you gave in the expression. In your case your object is required. Then you need to check the java class that the expression evaluates to. Commonly all the backend logic code will be their and if some manipulations or validations are required to be done with the data that the author enters in the dialog will be their. This class will also contain annotations that maps the class variables with the property value of the dialog. Hope this explains from where this ${required} came from. It will be more clear to you if you look into the java class that is referred to by the data-sly-use expression.