#### 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
Your URL
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

Right

#### 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

Right

#### 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

Options

Right

Options

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

Right

#### 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
Choose file

Right

Choose file
Upload

Left

Choose file

Right

Choose file