Basic example
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>s outside the input group.
Default Preview
@
@example.com
https://example.com/users/
$.00
@
With textarea
Code Example
<div class="input-group"> <span class="input-group-text">@</span> <input type="text" class="form-control" placeholder="User name"></div><div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username"> <span class="input-group-text">@example.com</span></div><label class="form-label" for="basi-url">Your vanity UR</label><div class="input-group"> <span class="input-group-text">https://example.com/users/</span> <input type="text" class="form-control"></div><div class="input-group"> <span class="input-group-text">$</span> <input type="text" class="form-control"> <span class="input-group-text">.00</span></div><div class="input-group"> <input type="text" class="form-control" placeholder="Username"> <span class="input-group-text">@</span> <input type="text" class="form-control" placeholder="Server"></div><div class="input-group"> <span class="input-group-text">With textarea</span> <textarea class="form-control"></textarea></div>
Size Preview
Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
Small
Default
Large
Code Example
<div class="input-group input-group-sm"> <span class="input-group-text">Small</span> <input type="text" class="form-control"></div><div class="input-group"> <span class="input-group-text">Default</span> <input type="text" class="form-control"></div><div class="input-group input-group-lg"> <span class="input-group-text">Large</span> <input type="text" class="form-control"></div>
Checkboxes and radios
Place any checkbox or radio option within an input group’s addon instead of text.
Code Example
<div class="input-group"> <div class="input-group-text"> <input type="checkbox" class="form-check-input"> </div> <input type="text" class="form-control"></div><div class="input-group"> <div class="input-group-text"> <input type="radio" class="form-check-input"> </div> <input type="text" class="form-control"></div>
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
Code Example
<div class="input-group input-group-sm"> <span class="input-group-text">First and last name</span> <input type="text" class="form-control"> <input type="text" class="form-control"></div>
Multiple addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
$0.00
$0.00
Code Example
<div class="input-group"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> <input type="text" class="form-control"></div><div class="input-group"> <input type="text" class="form-control"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span></div>
Button addons
Code Example
<div class="input-group mb-3"> <button class="btn btn-nmw btn-outline-primary">Button</button> <input type="text" class="form-control"></div><div class="input-group mb-3"> <input type="text" class="form-control"> <button class="btn btn-nmw btn-outline-primary">Button</button></div><div class="input-group mb-3"> <button class="btn btn-nmw btn-outline-primary">Button</button> <button class="btn btn-nmw btn-outline-primary">Button</button> <input type="text" class="form-control"></div><div class="input-group"> <input type="text" class="form-control"> <button class="btn btn-nmw btn-outline-primary">Button</button> <button class="btn btn-nmw btn-outline-primary">Button</button></div>
Buttons with dropdowns
Code Example
<div class="input-group mb-3"> <button class="btn btn-nmw btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown"><span>Dropdown</span><em class="icon ni ni-chevron-down"></em></button> <div class="dropdown-menu"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <input type="text" class="form-control"></div><div class="input-group mb-3"><input type="text" class="form-control"> <button class="btn btn-nmw btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown"><span>Dropdown</span><em class="icon ni ni-chevron-down"></em></button> <div class="dropdown-menu dropdown-menu-end"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a href="#">Separated link</a></li> </ul> </div></div>
Segmented buttons
Code Example
<div class="input-group mb-3"> <button class="btn btn-nmw btn-outline-primary">Action</button> <button class="btn btn-nmw btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"><em class="icon ni ni-chevron-down"></em></button> <div class="dropdown-menu"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <input type="text" class="form-control"></div><div class="input-group mb-3"> <input type="text" class="form-control"> <button class="btn btn-nmw btn-outline-primary">Action</button> <button class="btn btn-nmw btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"><em class="icon ni ni-chevron-down"></em></button> <div class="dropdown-menu dropdown-menu-end"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a href="#">Separated link</a></li> </ul> </div></div>
Custom select
Code Example
<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-nmw btn-outline-primary" type="button">Button</button> <select class="form-select" id="inputGroupSelect03"> <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="inputGroupSelect04"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <button class="btn btn-nmw btn-outline-primary" type="button">Button</button></div>
Custom file input
Code Example
<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-nmw btn-outline-primary" 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-nmw btn-outline-primary" type="button" id="inputGroupFileAddon04">Button</button></div>