Default


<div class="input-group mb-4">
   <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">@</span>
   </div>
   <input type="text" class="form-control" placeholder="Username" aria-label="Username"
      aria-describedby="basic-addon1">
</div>
<div class="input-group mb-4">
   <input type="text" class="form-control" placeholder="Recipient's username"
      aria-label="Recipient's username" aria-describedby="basic-addon2">
   <div class="input-group-append">
      <span class="input-group-text" id="basic-addon2">@example.com</span>
   </div>
</div>
<label for="basic-url">Your URL</label>
<div class="input-group mb-3">
   <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
   </div>
   <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-4">
   <div class="input-group-prepend">
      <span class="input-group-text">$</span>
   </div>
   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
   <div class="input-group-append">
      <span class="input-group-text">.00</span>
   </div>
</div>
<div class="input-group">
   <div class="input-group-prepend">
      <span class="input-group-text text-area">With textarea</span>
   </div>
   <textarea class="form-control" aria-label="With textarea"></textarea>
</div>
@
@example.com
https://example.com/users/
$
.00
With textarea

Simple Icon


<div class="input-group mb-4">
   <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon4"><i class="las la-bell font-size-20"></i></span>
   </div>
   <input type="text" class="form-control" placeholder="Notification" aria-label="notification"
      aria-describedby="basic-addon4">
</div>
<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
<div class="input-group">
   <input type="text" class="form-control" placeholder="Notification" aria-label="notification"
      aria-describedby="basic-addon5">
   <div class="input-group-append">
      <span class="input-group-text" id="basic-addon5"><i class="las la-bell font-size-20"></i></span>
   </div>
</div>

Left

Right

Spinning Icon


<div class="input-group mb-4">
   <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon6"><i class="fa fa-spinner fa-spin"></i></span>
   </div>
   <input type="text" class="form-control" placeholder="Spinners" aria-label="spinners"
      aria-describedby="basic-addon6">
</div>
<div class="input-group">
   <input type="text" class="form-control" placeholder="Spinners" aria-label="spinners"
      aria-describedby="basic-addon7">
   <div class="input-group-append">
      <span class="input-group-text" id="basic-addon7"><i class="fa fa-spinner fa-spin"></i></span>
   </div>
</div>

Left

Right

Switch


<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
<div class="input-group mb-4">
   <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon6"><i class="fa fa-spinner fa-spin"></i></span>
   </div>
   <input type="text" class="form-control" placeholder="Spinners" aria-label="spinners"
      aria-describedby="basic-addon6">
</div>
<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
<div class="input-group">
   <input type="text" class="form-control" placeholder="Spinners" aria-label="spinners"
      aria-describedby="basic-addon7">
   <div class="input-group-append">
      <span class="input-group-text" id="basic-addon7"><i class="fa fa-spinner fa-spin"></i></span>
   </div>
</div>

Left

Right

Buttons with dropdowns


<div class="input-group mb-4">
   <div class="input-group-prepend">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"
         aria-haspopup="true" aria-expanded="false">Dropdown </button>
      <div class="dropdown-menu">
         <a class="dropdown-item" href="javascript:void(0);">Action</a>
         <a class="dropdown-item" href="javascript:void(0);">Another action</a>
         <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
         <div role="separator" class="dropdown-divider"></div>
         <a class="dropdown-item" href="javascript:void(0);">Separated link</a>
      </div>
   </div>
   <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

Left

Action Another action Something else here Separated link

Right

Action Another action Something else here Separated link

Segmented buttons


<div class="input-group mb-4">
   <div class="input-group-prepend">
      <button type="button" class="btn btn-primary">Action</button>
      <button type="button" class="btn btn-outline-primary dropone dropdown-toggle dropdown-toggle-split"
         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <i class="las la-angle-down"></i>
      </button>
      <div class="dropdown-menu">
         <a class="dropdown-item" href="javascript:void(0);">Action</a>
         <a class="dropdown-item" href="javascript:void(0);">Another action</a>
         <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
         <div role="separator" class="dropdown-divider"></div>
         <a class="dropdown-item" href="javascript:void(0);">Separated link</a>
      </div>
   </div>
   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

Left

Action Another action Something else here Separated link

Right

Action Another action Something else here Separated link

Custom select


<div class="input-group mb-4">
   <div class="input-group-prepend">
      <label class="input-group-text" for="inputGroupSelect01">Options</label>
   </div>
   <select class="custom-select" id="inputGroupSelect01">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
   </select>
</div>

Left

Right

Left

Right

Sizing


<div class="input-group input-group-sm mb-4">
   <div class="input-group-prepend">
      <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
   </div>
   <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group mb-4">
   <div class="input-group-prepend">
      <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
   </div>
   <input type="text" class="form-control" aria-label="Default"
      aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group input-group-lg">
   <div class="input-group-prepend">
      <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
   </div>
   <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
Small
Default
Large

Dropdown Icon


<div class="input-group mb-4">
      
   <div class="input-group-prepend">
      <button class="btn btn-primary  dropone dropdown-toggle" type="button" data-toggle="dropdown"
         aria-haspopup="true" aria-expanded="false"><i class="las la-cog font-size-20"></i></button>
      <div class="dropdown-menu">
         <a class="dropdown-item" href="javascript:void(0);">Action</a>
         <a class="dropdown-item" href="javascript:void(0);">Another action</a>
         <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
         <div role="separator" class="dropdown-divider"></div>
         <a class="dropdown-item" href="javascript:void(0);">Separated link</a>
      </div>
   </div>
   <input type="text" class="form-control" placeholder="Dropdown" aria-label="dropdown">
</div>

Left

Action Another action Something else here Separated link

Right

Action Another action Something else here Separated link

Checkboxes


<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
<div class="input-group mb-4">
   <div class="input-group-prepend">
      <div class="input-group-text">
         <input type="checkbox" aria-label="Text input with checkbox">
      </div>
   </div>
   <input type="text" class="form-control" placeholder="Checkbox" aria-label="checkbox"
      aria-describedby="basic-addon1">
</div>
<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
<div class="input-group">
   <input type="text" class="form-control" placeholder="Checkbox" aria-label="checkbox"
      aria-describedby="basic-addon5">
   <div class="input-group-append">
      <div class="input-group-text">
         <input type="checkbox" aria-label="Text input with checkbox" checked>
      </div>
   </div>
</div>

Left

Right

Radios


<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
<div class="input-group mb-4">
   <div class="input-group-prepend">
      <div class="input-group-text">
         <input type="radio" name="custom-radio-1" checked>
      </div>
   </div>
   <input type="text" class="form-control" placeholder="Checkbox">
</div>
<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
<div class="input-group">
   <input type="text" class="form-control" placeholder="Checkbox">
   <div class="input-group-append">
      <div class="input-group-text">
         <input type="radio" name="custom-radio-1" checked>
      </div>
   </div>
</div>

Left

Right

Multiple inputs


<div class="input-group">
   <div class="input-group">
      <div class="input-group-prepend">
         <span class="input-group-text" id="first">First and last name</span>
      </div>
      <input type="text" class="form-control">
      <input type="text" class="form-control">
   </div>
</div>
First and last name

Multiple addons


<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
<div class="input-group mb-4">
   <div class="input-group-prepend">
      <span class="input-group-text">$</span>
      <span class="input-group-text">0.00</span>
   </div>
   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
<div class="input-group">
   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
   <div class="input-group-append">
      <span class="input-group-text">$</span>
      <span class="input-group-text">0.00</span>
   </div>
</div>

Left

$ 0.00

Right

$ 0.00

Custom select


<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
<div class="input-group mb-4">
   <div class="input-group-prepend">
      <button class="btn btn-primary" type="button">Button</button>
   </div>
   <input type="text" class="form-control" placeholder="" aria-label="">
</div>
<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
<div class="input-group mb-4">
   <input type="text" class="form-control" placeholder="Recipient's username"
      aria-label="Recipient's username">
   <div class="input-group-append">
      <button class="btn btn-primary" type="button">Button</button>
   </div>
</div>
<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
<div class="input-group mb-4">
   <div class="input-group-prepend">
      <button class="btn btn-outline-primary" type="button">Button</button>
      <button class="btn btn-outline-primary" type="button">Button</button>
   </div>
   <input type="text" class="form-control" placeholder="" aria-label="">
</div>
<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
<div class="input-group">
   <input type="text" class="form-control" placeholder="Recipient's username"
      aria-label="Recipient's username">
   <div class="input-group-append">
      <button class="btn btn-outline-primary" type="button">Button</button>
      <button class="btn btn-outline-primary" type="button">Button</button>
   </div>
</div>

Left

Right

Left

Right

Custom file input


<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
<div class="input-group mb-4">
   <div class="input-group-prepend">
      <span class="input-group-text">Upload</span>
   </div>
   <div class="custom-file">
      <input type="file" class="custom-file-input" id="inputGroupFile01">
      <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
   </div>
</div>
<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
<div class="input-group mb-4">
   <div class="custom-file">
      <input type="file" class="custom-file-input" id="inputGroupFile02">
      <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
   </div>
   <div class="input-group-append">
      <span class="input-group-text" id="upload">Upload</span>
   </div>
</div>
<p><i class="las la-long-arrow-alt-left mr-1"></i> Left </p>
<div class="input-group mb-4">
   <div class="input-group-prepend">
      <button class="btn btn-outline-secondary" type="button">Button</button>
   </div>
   <div class="custom-file">
      <input type="file" class="custom-file-input" id="inputGroupFile03">
      <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
   </div>
</div>
<p class="text-right"><i class="las la-long-arrow-alt-right mr-1"></i>Right</p>
<div class="input-group">
   <div class="custom-file">
      <input type="file" class="custom-file-input" id="inputGroupFile04">
      <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
   </div>
   <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button">Button</button>
   </div>
</div>

Left

Upload

Right

Upload

Left

Right