Input Group
Examples and usage guidelines for input group. Extend form controls by adding text, buttons, or button groups on either side of text inputs, custom selects, and custom file inputs.
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. We do not support multiple form-controls in a single input group and <label>s must come outside the input group.
@
@example.com
https://example.com/users/
$
.00
With textarea
Code Example
<div class="form-control-wrap"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">@</span> </div> <input type="text" class="form-control" placeholder="Username" required> </div></div><div class="form-control-wrap"> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" required> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2">@ex ample.com</span> </div> </div></div><div class="form-group"> <label class="form-label" for="basic-url">Your URL</label> <div class="form-control-wrap"> <div class="input-group"> <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"> </div> </div></div><div class="form-control-wrap"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">$</span> </div> <input type="text" class="form-control"> <div class="input-group-append"> <span class="input-group-text">.00</span> </div> </div></div><div class="form-control-wrap"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">With textarea</span> </div> <textarea class="form-control" aria-label="With textarea"></textarea> </div></div>
Sizing
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="form-control-wrap"> <div class="input-group input-group-sm"> <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><div class="form-control-wrap"> <div class="input-group"> <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><div class="form-control-wrap"> <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></div>
Checkboxes and radios
Place any checkbox or radio option within an input group’s addon instead of text.
Code Example
<div class="form-control-wrap"> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox"> </div> </div> <input type="text" class="form-control"> </div></div><div class="form-control-wrap"> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio";> </div> </div> <input type="text" class="form-control"> </div></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="form-control-wrap"> <div class="input-group"> <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></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="form-control-wrap"> <div class="input-group"> <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></div><div class="form-control-wrap"> <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></div>
Button addons
Code Example
<div class="form-control-wrap"> <div class="input-group"> <div class="input-group-prepend"> <button class="btn btn-outline-primary btn-dim">Button</button> </div> <input type="text" class="form-control"> </div></div><div class="form-control-wrap"> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username"> <div class="input-group-append"> <button class="btn btn-outline-primary btn-dim">Button</button> </div> </div></div><div class="form-control-wrap"> <div class="input-group"> <div class="input-group-prepend"> <button class="btn btn-outline-primary btn-dim">Button</button> <button class="btn btn-outline-primary btn-dim">Button</button> </div> <input type="text" class="form-control"> </div></div><div class="form-control-wrap"> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username"> <div class="input-group-append"> <button class="btn btn-outline-primary btn-dim">Button</button> <button class="btn btn-outline-primary btn-dim">Button</button> </div> </div></div>
Buttons with dropdowns
Code Example
<div class="form-control-wrap"> <div class="input-group"> <div class="input-group-prepend"> <button class="btn btn-outline-primary btn-dim dropdown-toggle" data-toggle="dropdown"><span>Dropdown</span><em class="icon mx-n1 ni ni-chevron-down"></em></button> <div class="dropdown-menu"> <ul class="link-list-opt no-bdr"> <li><a href="#">Action Settings</a></li> <li><a href="#">Push Notification</a></li> <li class="divider"></li> <li><a href="#">Login Activity</a></li> </ul> </div> </div> <input type="text" class="form-control" aria-label="Text input with dropdown button"> </div></div><div class="form-control-wrap"> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-outline-primary btn-dim dropdown-toggle" data-toggle="dropdown"><span>Dropdown</span><em class="icon mx-n1 ni ni-chevron-down"></em></button> <div class="dropdown-menu dropdown-menu-end"> <ul class="link-list-opt no-bdr"> <li><a href="#">Action Settings</a></li> <li><a href="#">Push Notification</a></li> <li class="divider"></li> <li><a href="#">Login Activity</a></li> </ul> </div> </div> </div></div>
Segmented buttons
Code Example
<div class="form-control-wrap"> <div class="input-group"> <div class="input-group-prepend"> <button class="btn btn-outline-primary btn-dim">Action</button> <button class="btn btn-icon btn-outline-primary btn-dim dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> <em class="icon ni ni-chevron-down"></em><span class="visually-hidden">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <ul class="link-list-opt no-bdr"> <li><a href="#">Action Settings</a></li> <li><a href="#">Push Notification</a></li> <li class="divider"></li> <li><a href="#">Login Activity</a></li> </ul> </div> </div> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"> </div></div><div class="form-control-wrap"> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"> <div class="input-group-append"> <button class="btn btn-outline-primary btn-dim">Action</button> <button class="btn btn-icon btn-outline-primary btn-dim dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> <em class="icon ni ni-chevron-down"></em><span class="visually-hidden">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <ul class="link-list-opt no-bdr"> <li><a href="#">Action Settings</a></li> <li><a href="#">Push Notification</a></li> <li class="divider"></li> <li><a href="#">Login Activity</a></li> </ul> </div> </div> </div></div>
Custom select
Input groups include support for custom selects inputs. Browser default versions of these are not supported.
Code Example
<div class="form-control-wrap"> <div class="input-group"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">Options</label> </div> <select class="form-control" id="inputGroupSelect01"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div></div><div class="form-control-wrap"> <div class="input-group"> <select class="form-control" id="inputGroupSelect02"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="input-group-append"> <label class="input-group-text" for="inputGroupSelect02">Options</label> </div> </div></div><div class="form-control-wrap"> <div class="input-group"> <div class="input-group-prepend"> <button class="btn btn-outline-primary btn-dim">Button</button> </div> <select class="form-control" id="inputGroupSelect03"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div></div><div class="form-control-wrap"> <div class="input-group"> <select class="form-control" id="inputGroupSelect04"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="input-group-append"> <button class="btn btn-outline-primary btn-dim">Button</button> </div> </div></div>
Custom file input
Input groups include support for custom file inputs. Browser default versions of these are not supported.
Upload
Upload
Code Example
<div class="form-control-wrap"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">Upload</span> </div> <div class="form-file"> <input type="file" class="form-file-input" id="inputGroupFile01"> <label class="form-file-label" for="inputGroupFile01">Choose file</label> </div> </div></div><div class="form-control-wrap"> <div class="input-group"> <div class="form-file"> <input type="file" class="form-file-input" id="inputGroupFile02"> <label class="form-file-label" for="inputGroupFile02">Choose file</label> </div> <div class="input-group-append"> <span class="input-group-text" id="">Upload</span> </div> </div></div><div class="form-control-wrap"> <div class="input-group"> <div class="input-group-prepend"> <button class="btn btn-outline-primary btn-dim">Button</button> </div> <div class="form-file"> <input type="file" class="form-file-input" id="inputGroupFile03"> <label class="form-file-label" for="inputGroupFile03">Choose file</label> </div> </div></div><div class="form-control-wrap"> <div class="input-group"> <div class="form-file"> <input type="file" class="form-file-input" id="inputGroupFile04"> <label class="form-file-label" for="inputGroupFile04">Choose file</label> </div> <div class="input-group-append"> <button class="btn btn-outline-primary btn-dim">Button</button> </div> </div></div>
