Empower users with clear and efficient ways to choose single option amongst multiple ones.
JTB_MD's Radio Buttons are designed to streamline user interactions for single-choice selections. They present users with a set of similar options, clearly indicating that only one choice can be made. This simple and familiar design makes it easy for users to understand and fulfill your requirements, leading to better form completion and data collection.
To ensure effortless integration into your web projects, JTB_MD's Radio Buttons are built upon the widely recognized HTML <input> elements with type radio. This familiarity translates to easy implementation across different browsers and devices, minimizing the need for additional coding or configuration.
To effortlessly create a radio element within your project, simply include an <input> element with the .jtbInput class and the radio type:
<!-- Example Radio -->
<input class='jtbInput' type='radio' />
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 Radio with label (label after) -->
<div class='jtbInput-container'>
<input class='jtbInput' type='radio' />
<label>Label after input</label>
</div>
<!-- Example Radio with label (label before) -->
<div class='jtbInput-container'>
<label>Label after input</label>
<input class='jtbInput' type='radio' />
</div>
By default, the library does not link the label with your radio box. For enabling your users to select the radio element by simply clicking its label, add your label for attribute that contains your radio element's ID.
<!-- Example Radio with label (connected) -->
<div class='jtbInput-container'>
<input class='jtbInput' type='radio' id='radio-1'/>
<label for='radio-1'>...</label>
</div>
Since radio elements use default inputs of html, you can use all of their features without any restrictions.
<!-- State = checked -->
<input class='jtbInput' type='radio' checked/>
Besides giving :disabled attribute to your radio element, to make your elements disabled, you can apply .disabled class to them too.
<!-- Disabled radio -->
<input class='jtbInput disabled' type='radio'/>
To make your radio 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 radio elements. To do so, simply apply the desired color class to your radios:
.jtbInput-[ purple | blue | aqua | green | lime | yellow | orange | volcano | red ]
<!-- Example colorful radio (Yellow) -->
<input class='jtbInput jtbInput-yellow' type='radio'/>
To make your radio elements larger or smaller than the default, simply apply the relevant size-class to it.
.jtbInput-[ xs | sm | md | lg | xl ]
<!-- Example radio (size = xs) -->
<input class='jtbInput jtbInput-xs' type='radio'/>
For radio 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='radio'/>
<!-- Rectangular version -->
<input class='jtbInput jtbInput-rect' type='radio'/>
<!-- Circular version -->
<input class='jtbInput jtbInput-circle' type='radio'/>
Copyright © 2024 JTBLabs - All rights reserved.