In my Symfony 4 project, I am looking to indicate mandatory fields with an asterisk next to their labels.
There are multiple ways to achieve this as mentioned in the documentation: https://symfony.com/doc/4.0/form/form_customization.html#adding-a-required-asterisk-to-field-labels
The CSS method seems to be the simplest approach.
To implement this, I added the following code in my CSS file:
label.required:after {
content: " *";
color: red;
font-weight: bold;
}
While this works well for most cases, I noticed that when using a ChoiceType field, the asterisk appears not just on the main label but on all possible choices.
Please see this HTML render for reference:
<div class="col-2">
<fieldset class="form-group">
<legend class="col-form-label required">Ajouter/Supprimer</legend>
<div id="role_choix">
<div class="form-check">
<input type="radio" id="role_choix_0" name="role[choix]" required="required" class="form-check-input" value="ajouter">
<label class="form-check-label required" for="role_choix_0">Ajouter</label>
</div>
<div class="form-check">
<input type="radio" id="role_choix_1" name="role[choix]" required="required" class="form-check-input" value="supprimer">
<label class="form-check-label required" for="role_choix_1">Supprimer</label>
</div>
</div>
</fieldset>
</div>
This issue specifically arises with radio buttons.
If anyone has suggestions or solutions to fix this problem, your help would be greatly appreciated!