I am using Bootstrap checkbox button group (link) with thymeleaf.
The Bootstrap checkbox button requires <label> tag to be right below <input> in order to highlight the correct checkbox button.
The issue is whenever I add the th:field="*{property_name}" in the input field as below:
<input value="Text" type="checkbox" class = "btn-check" id="text" autocomplete="off" name = "course_format" th:field="*{formats}">
<label class="btn btn-outline-info" for="text">Text</label>
Thymeleaf adds a hidden input element
<input type="hidden" name="_formats" value="on">
just below my <input type = "checkbox"> element
Therefore, the checkbox button fails to get highlighted although it gets selected.
HTML code snippet
<form method="POST" th:action="@{/submitCourse}" th:object="${coursePost}">
<div class="mb-3">
<label for="courseFormat" class="form-label">Course Format(Select all that apply)</label>
<div class= "btn-group" role="group">
<input value="Text" type="checkbox" class = "btn-check" id="text" autocomplete="off" name = "course_format" th:field="*{formats}">
<label class="btn btn-outline-info" for="text">Text</label>
<input value="Video" type="checkbox" class = "btn-check" id="video" autocomplete="off" name = "course_format" th:field="*{formats}">
<label class="btn btn-outline-info" for="video">Video</label>
<input value="Quiz" type="checkbox" class = "btn-check" id="quiz" autocomplete="off" name = "course_format" th:field="*{formats}">
<label class="btn btn-outline-info" for="quiz">Quiz</label>
<input value="Certificated" type="checkbox" class = "btn-check" id="certificated" autocomplete="off" name = "course_format" th:field="*{formats}">
<label class="btn btn-outline-info" for="certificated">Certificated</label>
</div>
</div>
</form>
Thymeleaf generated HTML
<form method="POST" action="/submitCourse">
<div class="mb-3">
<label for="courseFormat" class="form-label">Course Format(Select all that apply)</label>
<div class="btn-group" role="group">
<input value="Text" type="checkbox" class="btn-check" id="text" autocomplete="off" name="formats">
<input type="hidden" name="_formats" value="on"> <!-- generated by thymeleaf which is causing the issue(which is the checkbox button not getting highlighted -->
<label class="btn btn-outline-info" for="text">Text</label>
<input value="Video" type="checkbox" class="btn-check" id="video" autocomplete="off" name="formats">
<input type="hidden" name="_formats" value="on">
<label class="btn btn-outline-info" for="video">Video</label>
<input value="Quiz" type="checkbox" class="btn-check" id="quiz" autocomplete="off" name="formats">
<input type="hidden" name="_formats" value="on">
<label class="btn btn-outline-info" for="quiz">Quiz</label>
<input value="Certificated" type="checkbox" class="btn-check" id="certificated" autocomplete="off" name="formats">
<input type="hidden" name="_formats" value="on">
<label class="btn btn-outline-info" for="certificated">Certificated</label>
</div>
</div>
</form>