Thankful to Krajee!
to get more out of us.

Various label positioning methods and label styling features for the checkbox widget.

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

You can position labels beside checkboxes to the left or the right. If you wish to create block checkboxes instead of inline, then set the inline property to false. You can also enclose the labels over the checkbox - in this case set enclosedLabel property to true.


<div class="form-group">
    <label class="cbx-label" for="check-1g">Left Label</label>
    <input id="check-1g" value="1" data-toggle="checkbox-x">
    <span style="border-left: 1px solid #ddd; margin: 0 20px;"></span>
    <input id="check-2g" value="0" data-toggle="checkbox-x">
    <label class="cbx-label" for="check-2g">Right Label</label>
    <span style="border-left: 1px solid #ddd; margin: 0 20px;"></span>
    <label class="cbx-label">Enclosing Label
        <input id="check-3g" value="" data-toggle="checkbox-x" data-enclosed-label="true">
    </label>
</div>
<hr>
<div class="form-group">
<label class="cbx-label" for="check-4g">Label Above (Block Checkbox)</label>
<input id="check-4g" value="1" data-toggle="checkbox-x" data-inline="false">
</div>
<hr>
<div class="form-group">
<input id="check-5g" value="1" data-toggle="checkbox-x" data-inline="false">
<label class="cbx-label" for="check-4g">Label Below (Block Checkbox)</label>
</div>

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.