Switches

Special type of checkboxes that allows users to toggle between states in a user-friendly way.

About

Switches in JTB_MD offer a user-friendly alternative to traditional checkboxes for managing binary state choices. Their intuitive on/off toggle functionality enhances user engagement and clarity, making them ideal for scenarios where clear state selection and visual appeal are important.

The switch elements are built on the classic <input> element with type checkbox, ensuring effortless implementation and compatibility.

How to use

To effortlessly integrate switches into your projects use <input type='checkbox'> element with .jtbInput class, and form='switch' attribute.

                <!-- Example Switch -->
<input class='jtbInput' type='checkbox' form='switch' />

Labels

Like you can see from the example above, by default the input element creates a box with no label accompanying it. To specify a label, you can simply wrap your input element with .jtbInput-container and append a <label> element into the container with your desired content.

Note that the placement of your label affects the box orientation in your container

Label after input

Label before input

                    <!-- Example Switch with label (label after) -->
<div class='jtbInput-container'>
    <input class='jtbInput' type='checkbox' form='switch'/>
    <label>Label after input</label>
</div>

<!-- Example Switch with label (label before) -->
<div class='jtbInput-container'>
    <label>Label after input</label>
    <input class='jtbInput' type='checkbox' form='switch'/>
</div>

By default, the library does not link the label with your switch element. For enabling your users to toggle the swtich's state by simply clicking its label, add your label for attribute that contains your switch element's ID.

Click the label

                    <!-- Example Switch with label (connected) -->
<div class='jtbInput-container'>
    <input class='jtbInput' type='checkbox' form='switch' id='ch-1' />
    <label for='ch-1'>...</label>
</div>

States

Since switch elements use default inputs of html, you can use all of their features without any restrictions.

To maintain consistency with the "Get binary data" functionality, JTB_MD switches intentionally omit the "indeterminate" state. This aligns their behavior with the expected data format.

Unchecked

Checked

Disabled

                    <!-- State = checked -->
<input class='jtbInput' type='checkbox' form='switch' checked/>

Disabling

Besides giving :disabled attribute to your switch element, to make your elements disabled, you can apply .disabled class to them too.

Disabled by class

                    <!-- Disabled switch -->
<input class='jtbInput disabled' type='checkbox' form='switch'/>

Styling

To make your switch elements more inline with your projects, you can apply one of their pre-defined style classes in JTB_MD.

Never forget that you can leverage all classes from the Utilities section to seamlessly integrate elements with your design. However, the following pre-defined classes within switches have been crafted to simplify your design workflow.

Colors

JTB_MD enables you to utilize the predefined colors outlined in the Colors section for your switch elements. To do so, simply apply the desired color class to your switches:

purple

blue

aqua

green

lime

yellow

orange

volcano

red

                                <!-- Example colorful switch (Aqua) -->
<input class='jtbInput jtbInput-aqua' type='checkbox' form='switch'/>

Sizes

To make your switch elements larger or smaller than the default, simply apply the relevant size-class to it.

.jtbInput-[ xs | sm | md | lg | xl ]

                                <!-- Example switch (size = xs) -->
<input class='jtbInput jtbInput-xs' type='checkbox' form='switch'/>

Shapes

For switch 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.

Rectengular: .jtbInput-rect Generates a rectangular-shaped element with sharp edges.
Circular: .jtbInput-circle Generates a circular-shaped element with hard rounded corners and no padding.

Default

Rectengular

Circular

                    <!-- Default version -->
<input class='jtbInput' type='checkbox' form='switch'/>

<!-- Rectangular version -->
<input class='jtbInput jtbInput-rect' type='checkbox' form='switch'/>

<!-- Circular version -->
<input class='jtbInput jtbInput-circle' type='checkbox' form='switch'/>