Input Group

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Default Input

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.

@
@example.com
https://example.com/users/
$ .00
With textarea 
<div class="input-group mb-3">
<label for="groupFormUsername" class="form-label visually-hidden">Email address</label>
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" id="groupFormUsername" name="groupFormUsername" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
</div>

<div class="input-group mb-3">
<label for="groupFormeEmail" class="form-label visually-hidden">Email address</label>
<input
	type="text"
	class="form-control"
	id="groupFormeEmail"
	name="groupFormeEmail"
	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>

<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
<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>

<div class="input-group mb-3">
<label for="groupFormeNumber" class="form-label visually-hidden">Number</label>
<span class="input-group-text">$</span>
<input type="text" class="form-control" id="groupFormeNumber" name="groupFormeNumber" aria-label="Amount (to the nearest dollar)" />
<span class="input-group-text">.00</span>
</div>

<div class="input-group">
<label for="groupFormeMessage" class="form-label visually-hidden">Message</label>
<span class="input-group-text">With textarea</span>
<textarea class="form-control" id="groupFormeMessage" name="groupFormeMessage" aria-label="With textarea"></textarea>
</div>

Options

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 
<div class="input-group input-group-sm mb-3">
<label for="groupFormeSmall" class="form-label visually-hidden">Small</label>
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
<input type="text" class="form-control" id="groupFormeSmall" name="groupFormeSmall" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" />
</div>

<div class="input-group mb-3">
<label for="groupFormeDefault" class="form-label visually-hidden">Default</label>
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
<input type="text" class="form-control" id="groupFormeDefault" name="groupFormeDefault" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" />
</div>

<div class="input-group input-group-lg">
<label for="groupFormeLarge" class="form-label visually-hidden">Large</label>
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
<input type="text" class="form-control" id="groupFormeLarge" name="groupFormeLarge" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" />
</div>

Checkboxes Radios

Place any checkbox or radio option within an input group’s addon instead of text.

<div class="input-group mb-3">
<div class="input-group-text">
	<label for="inputFormCheck1" class="form-label visually-hidden">Small</label>
	<input class="form-check-input" id="inputFormCheck1" name="inputFormCheck1" type="checkbox" value="" aria-label="Checkbox for following text input" />
</div>
<label for="inputFormCheck" class="form-label visually-hidden">Check</label>
<input type="text" class="form-control" id="inputFormCheck" name="inputFormCheck" aria-label="Text input with checkbox" />
</div>

<div class="input-group">
<div class="input-group-text">
<label for="inputFormRadio" class="form-label visually-hidden">Radio</label>
<input class="form-check-input" id="inputFormRadio" name="inputFormRadio" type="radio" value="" aria-label="Radio button for following text input" />
</div>
<label for="inputFormRadio1" class="form-label visually-hidden">Check</label>
<input type="text" class="form-control" id="inputFormRadio1" name="inputFormRadio1" aria-label="Text input with radio button" />
</div>

Multiple input

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">
																<label for="inputFormLName" class="form-label visually-hidden">First and last name</label>
																<span class="input-group-text">First and last name</span>
																<input type="text" aria-label="First name" id="inputFormLName" name="inputFormLName" class="form-control" />
																<input type="text" aria-label="Last name" 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 
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<label for="inputFormAmount" class="form-label visually-hidden">Dollar</label>
<input type="text" class="form-control" id="inputFormAmount" name="inputFormAmount" aria-label="Dollar amount (with dot and two decimal places)" />
</div>

<div class="input-group">
<label for="inputFormDollar" class="form-label visually-hidden">Dollar</label>
<input type="text" class="form-control" id="inputFormDollar" name="inputFormDollar" aria-label="Dollar amount (with dot and two decimal places)" />
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>

Button addons

<div class="input-group mb-3">
<label for="inputFormButton" class="form-label visually-hidden">Button</label>
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
<input
	type="text"
	class="form-control"
	id="inputFormButton"
	name="inputFormButton"
	placeholder=""
	aria-label="Example text with button addon"
	aria-describedby="button-addon1"
/>
</div>

<div class="input-group mb-3">
<label for="inputFormButtons" class="form-label visually-hidden">Button</label>
<input
	type="text"
	class="form-control"
	id="inputFormButtons"
	name="inputFormButtons"
	placeholder="Recipient's username"
	aria-label="Recipient's username"
	aria-describedby="button-addon2"
/>
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>

<div class="input-group mb-3">
<label for="inputFormButton1" class="form-label visually-hidden">Button</label>
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
<input type="text" class="form-control" id="inputFormButton1" name="inputFormButton1" placeholder="" aria-label="Example text with two button addons" />
</div>

<div class="input-group">
<label for="inputFormButton2" class="form-label visually-hidden">Button</label>
<input type="text" class="form-control" id="inputFormButton2" name="inputFormButton2" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" />
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>

Button Dropdown

<div class="input-group mb-3">
<button class="btn btn-outline-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>
<label for="inputFormLink" class="form-label visually-hidden">Separated link</label>
<input type="text" class="form-control" id="inputFormLink" name="inputFormLink" aria-label="Text input with dropdown button" />
</div>

<div class="input-group mb-3">
<label for="inputFormSelect" class="form-label visually-hidden">Separated link</label>
<input type="text" class="form-control" id="inputFormSelect" name="inputFormSelect" aria-label="Text input with dropdown button" />
<button class="btn btn-outline-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-outline-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>
<label for="inputFormSelection" class="form-label visually-hidden">Separated link</label>
<input type="text" class="form-control" id="inputFormSelection" name="inputFormSelection" aria-label="Text input with 2 dropdown buttons" />
<button class="btn btn-outline-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-outline-secondary">Action</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" 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>
<label for="inputFormText" class="form-label visually-hidden">Separated link</label>
<input type="text" class="form-control" id="inputFormText" name="inputFormText" aria-label="Text input with segmented dropdown button" />
</div>

<div class="input-group">
<label for="inputFormToggle" class="form-label visually-hidden">Separated link</label>
<input type="text" class="form-control" id="inputFormToggle" name="inputFormToggle" aria-label="Text input with segmented dropdown button" />
<button type="button" class="btn btn-outline-secondary">Action</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" 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>

Custom forms

<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-outline-secondary" type="button">Button</button>
                                                    <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
                                                      <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">
                                                    <select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
                                                      <option selected>Choose...</option>
                                                      <option value="1">One</option>
                                                      <option value="2">Two</option>
                                                      <option value="3">Three</option>
                                                    </select>
                                                    <button class="btn btn-outline-secondary" type="button">Button</button>
                                                  </div>