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-end"><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-end"><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-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>

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

<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">Button</button>
<select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>

<div class="input-group">
<select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button class="btn btn-outline-secondary" type="button">Button</button>
</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-end"><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


<div class="input-group">
<div class="input-group-text">
<input class="form-check-input mt-0" type="radio" value=""
aria-label="Radio button for following text input">
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>

<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with radio button">
<div class="input-group-text">
<input class="form-check-input mt-0" type="radio" value=""
aria-label="Radio button for following text input">
</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


<div class="input-group mb-3">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</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-end"><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-end"><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


<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupFile01">Upload</label>
<input type="file" class="form-control" id="inputGroupFile01">
</div>

<div class="input-group mb-3">
<input type="file" class="form-control" id="inputGroupFile02">
<label class="input-group-text" for="inputGroupFile02">Upload</label>
</div>

<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
<input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03"
aria-label="Upload">
</div>

<div class="input-group">
<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04"
aria-label="Upload">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>