Checkbox elements
A CheckboxFormElement writes a <input type="checkbox"> tag to the output.
Element and builder
The ViewElement implementation for a checkbox element is a CheckboxFormElement.
A builder can be created via the OptionFormElementBuilder#checkbox builder or via the BootstrapUiBuilders#checkbox factory methods.
Thymeleaf model writer
A CheckboxFormElementWriter writes <input> tags to the Thymeleaf model.
Based on the configuration of the CheckboxFormElement that should be written, child elements will be added or attributes will be provided to the tag.
If it holds text or child elements, a label will be added.
Examples
Creating a checkbox
Given the following builder configuration:
BootstrapUiBuilders.checkbox()
.build();The following markup would be rendered:
<div class="checkbox">
<input type="checkbox"></input>
</div>Providing a label
Given the following builder configuration:
BootstrapUiBuilders.checkbox()
.label( "John" ) (1)
.build()| 1 | A label for a checkbox button can also be provided using the text method on the OptionFormElementBuilder.
The value set via the label method always takes precedence over the text value. |
The following markup would be rendered:
<div class="checkbox">
<label><input type="checkbox"></input>John</label>
</div>Not wrapping a checkbox
Checkbox elements are wrapped inside a div by default.
By specifying the wrapped property on a CheckboxFormElement, this behaviour can be prevented.
If a checkbox element is not wrapped, it will be rendered within the label if one is present.
Given the following builder configuration:
BootstrapUiBuilders.checkbox()
.label( "John" )
.wrapped( false )
.build()The following markup would be rendered:
<label><input type="checkbox"></input>john</label>Child elements
Given the following builder configuration:
BootstrapUiBuilders.checkbox()
.label( "John" )
.add( BootstrapUiBuilders.glyphIcon( GlyphIcon.USER ) )
.build()The following markup would be rendered:
<div class="checkbox">
<label>
<input type="checkbox"></input>John
<span aria-hidden="true" class="glyphicon glyphicon-user"></span>
</label>
</div>