INPUT GROUPS

Make your inputs group with other elements!

Usage

The idea behind grouping is really simple. Like we already stated in the Input elements, create an input element with .jtbInputGroup and wrap the element with .jtbInputGroupExtender. From now on, you can add anything with .jtbAddition class to create a fresh input group.

@
@example.com
$
.00
Textarea
		Copy
		<!-- Left side -->
<div class='jtbInputGroupExtender'>
	<div class='jtbAddition'>
		@
	</div>
	<div class='jtbInputGroup'>
        <input type='text' class='jtbInput' placeholder='Recipient's Username'>
        <span class='jtbInputBar'></span>
    </div>
</div>

<!-- Right side -->
<div class='jtbInputGroupExtender'>
	<div class='jtbInputGroup'>
        <input type='text' class='jtbInput' placeholder='Recipient's Username'>
        <span class='jtbInputBar'></span>
    </div>
	<div class='jtbAddition'>
		@example.com
	</div>
</div>

<!-- Double side -->
<div class='jtbInputGroupExtender'>
	<div class='jtbAddition'>
		$
	</div>
	<div class='jtbInputGroup'>
        <textarea class='jtbInput' rows='4'></textarea> 
        <span class='jtbInputBar'></span>
    </div>
	<div class='jtbAddition'>
		.00
	</div>
</div>

<!-- TextArea -->
<div class='jtbInputGroupExtender'>
	<div class='jtbAddition'>
		Textarea
	</div>
	<div class='jtbInputGroup'>
        <textarea class='jtbInput' rows='4'></textarea> 
        <span class='jtbInputBar'></span>
    </div>
</div>
	

Elements

There is no restrictions on the elements which you want to append your input area. You can use anything as .jtbAddition.

		Copy
		<!-- Button -->
<div class='jtbInputGroupExtender'>
	<div class='jtbInputGroup'>
        <input type='text' class='jtbInput' placeholder='Search something'>
        <span class='jtbInputBar'></span>
    </div>
    <div class='jtbAddition'>
		<button class='jtbButton jtbButton_xs'>Go!</button>
	</div>
</div>

<!-- Checkbox -->
<div class='jtbInputGroupExtender'>
	<div class='jtbAddition'>
		<label class='jtbCheckbox'>
			<input type='checkbox' class='jtbInput' />
			<span></span>
		</label>
	</div>
	<div class='jtbInputGroup'>
        <input type='text' class='jtbInput' placeholder='Search something'>
        <span class='jtbInputBar'></span>
    </div>
</div>
	

Group with icon (Special feature)

This part is little bit tricky. Since the grouping was different in previous JTB_MD's, we decided to keep this feature available until next versions (Probably will be deleted on v0.2). To use this feature you don't neetd to create .jtbInputGroupExtender, but you need to add .jtbInputGroupWithIcon class into your .jtbInputGroup. After that add your icon with <i> tag.

We keep this part because of the coloring of the icon but will be deleted in future versions.
		Copy
		<div class='jtbInputGroup jtbInputGroupWithIcon'>
	<input type='text' class='jtbInput'/>
	<label>Username</label>
	<span class='jtbInputBar'></span>
	<i class='jtb-user'></i>
</div>