Input Group

is a wrapper to enhance an input by adding an icon, text, button or a additional input in front or behind the input field.

Examples #

here is a quick example of the input group style.

<div class="n-input-group">  
    <input class="n-form-control" placeholder="enter username..." />
    <div class="n-input-group-append">
        <span class="n-input-group-text">@mytabworks.com</span>
    </div>
</div>
<div class="n-input-group">  
    <div class="n-input-group-prepend">
        <span class="n-input-group-text">$</span>
    </div>
    <input class="n-form-control" /> 
</div>
<div class="n-input-group">  
    <div class="n-input-group-prepend">
        <span class="n-input-group-text">$</span>
    </div>
    <input class="n-form-control" /> 
    <div class="n-input-group-append">
        <span class="n-input-group-text">.00</span>
    </div>
</div>
<div class="n-input-group">  
    <div class="n-input-group-prepend">
        <span class="n-input-group-text">textarea</span>
    </div>
    <textarea class="n-form-control" />
</div>

@mytabworks.com

.00

textarea

Button addons #

you can also addon buttons.

<div class="n-input-group">  
    <input class="n-form-control" />
    <div class="n-input-group-append">
        <button class="n-btn">Button</button>
    </div>
</div>
<div class="n-input-group">  
    <div class="n-input-group-prepend">
        <button class="n-btn">Button</button>
    </div>
    <input class="n-form-control" /> 
</div>
<div class="n-input-group">  
    <div class="n-input-group-prepend">
        <button class="n-btn">Button</button>
    </div>
    <input class="n-form-control" /> 
    <div class="n-input-group-append">
        <button class="n-btn">Button</button>
    </div>
</div>

Checkbox and radio addons #

you can addon checkboxes and radios.

<div class="n-input-group">  
    <div class="n-input-group-prepend"> 
        <div class="n-input-group-text">
            <input class="n-form-control" type="checkbox" />
        </div> 
    </div>
    <input class="n-form-control" /> 
</div>
<div class="n-input-group">  
    <div class="n-input-group-prepend"> 
        <div class="n-input-group-text">
            <input class="n-form-control" type="radio" />
        </div> 
    </div>
    <input class="n-form-control" /> 
</div>

Multiple inputs #

you can group multiple inputs.

<div class="n-input-group">
    <div class="n-input-group-prepend">
        <span class="n-input-group-text">$</span>
    </div>  
    <input class="n-form-control" />
    <input class="n-form-control" placeholder="00" /> 
</div>
<div class="n-input-group">  
    <div class="n-input-group-prepend">
        <span class="n-input-group-text">time</span>
    </div>
    <input class="n-form-control" />
    <div class="n-input-group-prepend">
        <span class="n-input-group-text">:</span>
    </div>
    <input class="n-form-control" /> 
    <div class="n-input-group-append">
        <button class="n-btn">submit</button>
    </div>
</div>

time

Multiple addons #

you can add multiple addons.

<div class="n-input-group"> 
    <input class="n-form-control" /> 
    <div class="n-input-group-append">
        <span class="n-input-group-text">@mytabworks.com</span>
    </div>
    <div class="n-input-group-append">
        <button class="n-btn">submit</button>
    </div>
</div>

@mytabworks.com

DARK THEME

Input Group

Warning!