INPUT ELEMENTS

All the input elements have their unique styles & options and components in JTB_MD! We focused the transitions and smoothness of these elements; because we area aware that it is very important for the user interactions.

Input fields

To create an input field; you need to start with .jtbInputGroup, then you can include your .jtbInput and use other approprite elements for your needs.

To activate validation for an input field; simply add required attribute to your input element. Note that the type attribute is the base of the validation. So for proper usage; it is important to use the correct type.

			Copy
			<!-- Normal -->
<div class='jtbInputGroup'>
	<input type='text' class='jtbInput'/>
	<label>Input (Default)</label>
	<span class='jtbInputBar'></span>
</div>

<!-- With coloring animation (Required) -->
<div class='jtbInputGroup'>
	<input type='text' class='jtbInput' required/>
	<label>Input (Default)</label>
	<span class='jtbInputBar'></span>
</div>

<!-- Disabled -->
<div class='jtbInputGroup'>
	<input type='text' class='jtbInput' disabled/>
	<label>Input (Default)</label>
	<span class='jtbInputBar'></span>
</div>
		

Select boxes

Select boxes are same as the input fields, just cover them with .jtbInputGroup and use it on your purpose.

		Copy
		<!-- Single select -->
<div class='jtbInputGroup'>
	<select class='jtbInput'>
		...Options...
	</select>
	<label>Select</label>
    <span class='jtbInputBar'></span>
</div>

<!-- Multiple select -->
<div class='jtbInputGroup'>
	<select class='jtbInput' multiple>
		...Options...
	</select>
	<label>Select Multiple</label>
    <span class='jtbInputBar'></span>
</div>
	

Textarea

All the features we have stated above is valid with textareas too. Just create it like an input element.

			Copy
			<div class='jtbInputGroup'>
    <textarea class='jtbInput' rows='4'></textarea>
    <label>Textarea</label>
    <span class='jtbInputBar'></span>
</div>
		

Slider | Range

To create a slider, you can use the default container without .jtbInputBar.

			Copy
			<input type="range" class="jtbInput" />
		

Checkbox

You can create a checkbox with using the following pattern:

			Copy
			<!-- Normal -->
<label class='jtbCheckbox'>
	<input type='checkbox' class='jtbInput' />
	<span>Hello! I'm a checkbox!</span>
</label>

<!-- Required -->
<label class='jtbCheckbox'>
	<input type='checkbox' class='jtbInput' required />
	<span>Hello! I'm a checkbox!</span>
</label>

<!-- Disabled -->
<label class='jtbCheckbox'>
	<input type='checkbox' class='jtbInput' disabled />
	<span>Hello! I'm a checkbox!</span>
</label>


		

Radio buttons

You can create a radio button with using the following pattern:


			Copy
			<<label class='jtbRadio'>
	<input type='radio' class='jtbInput'/>
	<span></span>
	Hello! I'm a radio button!
</label>
		

Switch

You can create switches with using the following pattern:

			Copy
			<!-- Normal -->
<label class='jtbSwitch'>
	<input type='checkbox' class='jtbInput' checked/>
	<span></span>
</label>

<!-- Disabled -->
<label class='jtbSwitch'>
	<input type='checkbox' class='jtbInput' checked/>
	<span></span>
</label>
		

Javascript behaviour

Initializing

Javascript behaivours of jtbInputs has been written in input.js plugin of jtb_md.js. To avoid any problematic behaviour on input elements; do not remove this plugin manually.