#### Default

@
@example.com
Your vanity URL
https://
$
.00
With textarea

    <div class="input-group mb-4">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon5">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username">
    </div>

    <div class="input-group mb-5">
      <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-addon6">@example.com</span>
      </div>
    </div>

    <label for="basic-url">Your vanity URL</label>
    <div class="input-group mb-4">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon7">https://</span>
      </div>
      <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="example.com/users/">
    </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 mb-4">
      <div class="input-group-prepend">
        <span class="input-group-text">With textarea</span>
      </div>
      <textarea class="form-control" aria-label="With textarea"></textarea>
    </div>

#### Simple Icon

Left

Right

    =========
      LEFT
    =========
    <div class="input-group mb-4">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1"><svg> ... </svg></span>
        </div>
        <input type="text" class="form-control" placeholder="Notification" aria-label="notification" aria-describedby="basic-addon1">
    </div>

    =========
      Right
    =========
    <div class="input-group mb-4">
        <input type="text" class="form-control" placeholder="Notification" aria-label="notification" aria-describedby="basic-addon2">
        <div class="input-group-append">
            <span class="input-group-text" id="basic-addon2"><svg> ... </svg></span>
        </div>
    </div>

#### Spinning Icon

Left

Right

    =========
      LEFT
    =========
    <div class="input-group mb-4">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon3"><svg class="spin"> ... </svg></span>
        </div>
        <input type="text" class="form-control" placeholder="Spinners" aria-label="spinners" aria-describedby="basic-addon3">
    </div>

    =========
      Right
    =========
    <div class="input-group mb-4">
        <input type="text" class="form-control" placeholder="Spinners" aria-label="spinners" aria-describedby="basic-addon4">
        <div class="input-group-append">
            <span class="input-group-text" id="basic-addon4"><svg class="spin"> ... </svg></span>
        </div>
    </div>

#### Dropdown Icon

Left

Right

    =========
      LEFT
    =========
    <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"><svg> ... </svg> </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>

    =========
      Right
    =========
    <div class="input-group mb-4">
        <input type="text" class="form-control" placeholder="Dropdown" aria-label="dropdown">
        <div class="input-group-append">
            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg> ... </svg> </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>
    </div>

#### Checkboxes

Left

Right

    =========
      LEFT
    =========
    <div class="input-group mb-4">
      <div class="input-group-prepend">
        <div class="input-group-text">
            <div class="n-chk align-self-end">
                <label class="new-control new-checkbox checkbox-danger" style="height: 21px; margin-bottom: 0; margin-right: 0">
                  <input type="checkbox" class="new-control-input" checked>
                  <span class="new-control-indicator"></span>
                </label>
            </div>
        </div>
      </div>
      <input type="text" class="form-control" placeholder="Checkbox" aria-label="checkbox" >
    </div>

    =========
      Right
    =========
    <div class="input-group mb-4">
        <input type="text" class="form-control" placeholder="Checkbox" aria-label="checkbox" aria-describedby="basic-addon1">
        <div class="input-group-append">
            <div class="input-group-text">
                <div class="n-chk align-self-end">
                    <label class="new-control new-checkbox checkbox-warning" style="height: 21px; margin-bottom: 0; margin-right: 0">
                      <input type="checkbox" class="new-control-input" checked>
                      <span class="new-control-indicator"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>

#### Radios

Left

Right

    =========
      LEFT
    =========
    <div class="input-group mb-4">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <div class="n-chk align-self-end">
                    <label class="new-control new-radio radio-info" style="height: 21px; margin-bottom: 0; margin-right: 0">
                        <input type="radio" class="new-control-input" name="custom-radio-1" checked>
                        <span class="new-control-indicator"></span>
                    </label>
                </div>
            </div>
        </div>
        <input type="text" class="form-control" placeholder="Radio" aria-label="radio" >
    </div>

    =========
      Right
    =========
    <div class="input-group mb-4">
        <input type="text" class="form-control" placeholder="Radio" aria-label="Radio">
        <div class="input-group-append">
            <div class="input-group-text">
                <div class="n-chk align-self-end">
                    <label class="new-control new-radio radio-success" style="height: 21px; margin-bottom: 0; margin-right: 0">
                      <input type="radio" class="new-control-input" name="custom-radio-1" checked>
                      <span class="new-control-indicator"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>

#### Switch

Left

Right

    =========
      LEFT
    =========

    <div class="input-group mb-4">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <label class="switch s-primary mb-0">
                    <input type="checkbox" checked="">
                    <span class="slider"></span>
                </label>
            </div>
        </div>
        <input type="text" class="form-control" placeholder="Switch" aria-label="switch" >
    </div>

    =========
      RIGHT
    =========

    <div class="input-group mb-4">
        <input type="text" class="form-control" placeholder="Switch" aria-label="switch">
        <div class="input-group-append">
            <div class="input-group-text">
                <label class="switch s-danger mb-0">
                    <input type="checkbox" checked="">
                    <span class="slider"></span>
                </label>
            </div>
        </div>
    </div>

#### Sizing

Small
Default
Large

    <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 mb-4">
      <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>

#### Multiple Fields

#### Multiple inputs

First and last name

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

#### Multiple addons

Left

$ 0.00

Right

$ 0.00

    =========
      LEFT
    =========
    <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>

    =========
      RIGHT
    =========
    <div class="input-group mb-4">
      <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>

#### Input Group with Action

#### Buttons with dropdowns

Left

Right

    =========
      LEFT
    =========
    <div class="input-group mb-4">
      <div class="input-group-prepend">
        <button class="btn btn-secondary 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>

    =========
      RIGHT
    =========
    <div class="input-group mb-4">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
        <button class="btn btn-secondary 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>
    </div>

#### Segmented buttons

Left

Right

    =========
      LEFT
    =========
    <div class="input-group mb-4">
      <div class="input-group-prepend">
        <button type="button" class="btn btn-info">Action</button>
        <button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <svg> ... </svg>
        </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>

    =========
      RIGHT
    =========
    <div class="input-group mb-4">
      <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
      <div class="input-group-append">
        <button type="button" class="btn btn-outline-info">Action</button>
        <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <svg> ... </svg>
        </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>
    </div>

#### Button addons

Left

Right

Left

Right

    =========
      LEFT
    =========
    <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>

    =========
      RIGHT
    =========
    <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>

    =========
      LEFT
    =========
    <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>

    =========
      RIGHT
    =========
    <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-outline-primary" type="button">Button</button>
        <button class="btn btn-outline-primary" type="button">Button</button>
      </div>
    </div>