Empower users with clear and efficient ways to choose boolean values via user-friendly input boxes.
JTB_MD's Checkboxes are intuitive and interactive elements that are designed to meet needs such as collecting boolean data (e.g., user confirmation) or making selections from a multiple data sets.
Just like other form elements within JTB_MD, checkboxes seamlessly integrate with the standard HTML <input> element with type checkbox, ensuring effortless implementation and compatibility.
To effortlessly create a checkbox element within your project, simply include an <input> element with the .jtbInput class and the checkbox type:
<!-- Example Checkbox -->
<input class='jtbInput' type='checkbox' />
Like you can see from the example above, by default the input element creates just a box with no label with it. To make it more meaningful you can simply wrap your input element with .jtbInput-container and append a <label> element into the container with your desired text.
Note that the placement of your label affects the box orientation in your container
<!-- Example Checkbox with label (label after) -->
<div class='jtbInput-container'>
<input class='jtbInput' type='checkbox' />
<label>Label after input</label>
</div>
<!-- Example Checkbox with label (label before) -->
<div class='jtbInput-container'>
<label>Label after input</label>
<input class='jtbInput' type='checkbox' />
</div>
By default, the library does not link the label with your checkbox itself. For enabling your users to toggle the checkbox's state by simply clicking its label, add your label for attribute that contains your checkbox's ID.
<!-- Example Checkbox with label (connected) -->
<div class='jtbInput-container'>
<input class='jtbInput' type='checkbox' id='ch-1'/>
<label for='ch-1'>...</label>
</div>
Since checkbox elements use default inputs of html, you can use all of their features without any restrictions.
<!-- State = checked -->
<input class='jtbInput' type='checkbox' checked/>
Besides giving :disabled attribute to your checkbox element, to make your elements disabled, you can apply .disabled class to them too.
<!-- Disabled checkbox -->
<input class='jtbInput disabled' type='checkbox'/>
To make your checkbox elements more inline with your projects, you can apply one of their pre-defined style classes in JTB_MD.
JTB_MD enables you to utilize the predefined colors outlined in the Colors section for your checkbox elements. To do so, simply apply the desired color class to your checkboxes:
.jtbInput-[ purple | blue | aqua | green | lime | yellow | orange | volcano | red ]
<!-- Example colorful checkbox (Aqua) -->
<input class='jtbInput jtbInput-aqua' type='checkbox'/>
To make your checkbox elements larger or smaller than the default, simply apply the relevant size-class to it.
.jtbInput-[ xs | sm | md | lg | xl ]
<!-- Example checkbox (size = xs) -->
<input class='jtbInput jtbInput-xs' type='checkbox'/>
For checkbox elements, besides default one, there are two defined shapes available in JTB_MD. You can easily apply any of these by adding their corresponding classes.
.jtbInput-rect Generates a rectangular-shaped element with sharp edges..jtbInput-circle Generates a circular-shaped element with hard rounded corners and no padding.
<!-- Default version -->
<input class='jtbInput' type='checkbox'/>
<!-- Rectangular version -->
<input class='jtbInput jtbInput-rect' type='checkbox'/>
<!-- Circular version -->
<input class='jtbInput jtbInput-circle' type='checkbox'/>
Copyright © 2024 JTBLabs - All rights reserved.