Input Group

Basic

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>outside the input group.

Please choose a username.

@example.com

Your vanity URL

https://example.com/users/

$ .00

With textarea

<!--begin::Input group-->
<div class="input-group mb-5">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<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"/>
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-5">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group mb-5">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"/>
<span class="input-group-text">.00</span>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group mb-5">
<input type="text" class="form-control" placeholder="Username" aria-label="Username"/>
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Server" aria-label="Server"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<!--end::Input group-->

Sizing

Add the relative form sizing classes to the .input-groupitself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Small

Default

Large

<!--begin::Input group-->
<div class="input-group input-group-sm mb-5">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group mb-5">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group input-group-lg">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>
</div>
<!--end::Input group-->

Icons

Use Duotune, Bootstrap, Font Awesome, Line Awesome icons within Input Group's .input-group-textelement as shown below:

.00

<!--begin::Input group-->
<div class="input-group mb-5">
<span class="input-group-text" id="basic-addon1">
<!--begin::Svg Icon | path: icons/duotune/communication/com006.svg-->
<span class="svg-icon svg-icon-3x">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
....
</svg>
</span>
<!--end::Svg Icon-->
</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<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"/>
<span class="input-group-text" id="basic-addon2">
<i class="fas fa-envelope-open-text fs-4"></i>
</span>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group mb-5">
<span class="input-group-text" id="basic-addon3">
<i class="las la-wallet fs-1"></i>
</span>
<input type="text" class="form-control" id="basic-url"  placeholder="Website URL" aria-describedby="basic-addon3"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group mb-5">
<span class="input-group-text"><i class="bi bi-graph-down fs-2"></i></span>
<input type="text" class="form-control" placeholder="Amount (to the nearest dollar)"/>
<span class="input-group-text">.00</span>
</div>
<!--end::Input group-->

Multiple inputs

While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>.

First and last name

                <div class="input-group">
              <span class="input-group-text">First and last name</span>
              <input type="text" aria-label="First name" class="form-control">
              <input type="text" aria-label="Last name" class="form-control">
            </div>

Button addons

                <div class="input-group mb-3">
              <button class="btn btn-secondary" type="button" id="button-addon1">Button</button>
              <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
            </div>
            
            <div class="input-group mb-3">
              <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
              <button class="btn btn-secondary" type="button" id="button-addon2">Button</button>
            </div>
            
            <div class="input-group mb-3">
              <button class="btn btn-secondary" type="button">Button</button>
              <button class="btn btn-secondary border-start" type="button">Button</button>
              <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
            </div>
            
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
              <button class="btn btn-secondary" type="button">Button</button>
              <button class="btn btn-secondary border-start" type="button">Button</button>
            </div>

Buttons with dropdowns

                <div class="input-group mb-3">
              <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
              <input type="text" class="form-control" aria-label="Text input with dropdown button">
            </div>
            
            <div class="input-group mb-3">
              <input type="text" class="form-control" aria-label="Text input with dropdown button">
              <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
            </div>
            
            <div class="input-group">
              <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action before</a></li>
                <li><a class="dropdown-item" href="#">Another action before</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
              <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
              <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
            </div>

Segmented buttons

                <div class="input-group mb-3">
              <button type="button" class="btn btn-secondary">Action</button>
              <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split border-start" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
              <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
            </div>
            
            <div class="input-group">
              <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
              <button type="button" class="btn btn-secondary">Action</button>
              <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split border-start" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
            </div>