Add asterisk to label for required fields in AEM adaptive form

Question

The given input field - 'First Name' is a required field and is configured in Adaptive AEM Forms. But I want to add red asterisk * to the label for User experience. I can add * beside the label as text but it won't be in red. Is there any configuration in Adaptive form/AEM to do so?

Answer 1

If you want to do it with CSS, you can try the following

.guideFieldNode[data-mandatory=true] .guideFieldLabel label:after {
    content: '*';
    color: red;
}

The above would target all fields which have been marked as required in the adaptive form and add the * at the end of the field name.