Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
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.
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label form-label-xl">Label</label>
<select class="form-select form-select-xl">
<option>placeholder</option>
</select>
<div class="invalid-feedback d-block tiny mt-1">
Please provide a valid state
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label form-label-lg">Label</label>
<select class="form-select form-select-lg border-success">
<option>placeholder</option>
</select>
<div class="valid-feedback d-block tiny mt-1">
Success!
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label">Label</label>
<select class="form-select">
<option>placeholder</option>
</select>
<div class="text-gray-600 d-block tiny mt-1">
Password must contain letters and numbers
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label form-label-sm">Label</label>
<select class="form-select" disabled>
<option>placeholder</option>
</select>
<div class="text-gray-600 d-block tiny mt-1">
muted
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label form-label-xl">Label</label>
<div class="input-group input-group-xl">
<span class="input-group-text btn-primary" id="inputGroup-sizing-xl">
<svg data-name="icons/tabler/check" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Check background" width="16" height="16" fill="none"></rect>
<path d="M14.758.213a.727.727,0,0,1,1.1.947l-.07.082-9.7,9.7a.727.727,0,0,1-.947.07l-.082-.07L.213,6.09a.727.727,0,0,1,.947-1.1l.082.07L5.576,9.4Z" transform="translate(0 2)" fill="#ffffff"></path>
</svg>
</span>
<input type="text" class="form-control" placeholder="placeholder">
</div>
<div class="invalid-feedback d-block tiny mt-1">
Please provide a valid state
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label form-label-lg">Label</label>
<div class="input-group input-group-lg">
<span class="input-group-text btn-primary" id="inputGroup-sizing-lg">
<svg data-name="icons/tabler/check" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Check background" width="16" height="16" fill="none"></rect>
<path d="M14.758.213a.727.727,0,0,1,1.1.947l-.07.082-9.7,9.7a.727.727,0,0,1-.947.07l-.082-.07L.213,6.09a.727.727,0,0,1,.947-1.1l.082.07L5.576,9.4Z" transform="translate(0 2)" fill="#ffffff"></path>
</svg>
</span>
<input type="text" class="form-control" placeholder="placeholder">
</div>
<div class="invalid-feedback d-block tiny mt-1">
Please provide a valid state
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label">Label</label>
<div class="input-group">
<span class="input-group-text btn-primary" id="inputGroup-sizing-default">
<svg data-name="icons/tabler/check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Check background" width="16" height="16" fill="none"></rect>
<path d="M14.758.213a.727.727,0,0,1,1.1.947l-.07.082-9.7,9.7a.727.727,0,0,1-.947.07l-.082-.07L.213,6.09a.727.727,0,0,1,.947-1.1l.082.07L5.576,9.4Z" transform="translate(0 2)" fill="#ffffff"></path>
</svg>
</span>
<input type="text" class="form-control" placeholder="placeholder">
</div>
<div class="invalid-feedback d-block tiny mt-1">
Please provide a valid state
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label form-label-sm">Label</label>
<div class="input-group input-group-sm">
<span class="input-group-text btn-primary" id="inputGroup-sizing-sm">
<svg data-name="icons/tabler/check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Check background" width="16" height="16" fill="none"></rect>
<path d="M14.758.213a.727.727,0,0,1,1.1.947l-.07.082-9.7,9.7a.727.727,0,0,1-.947.07l-.082-.07L.213,6.09a.727.727,0,0,1,.947-1.1l.082.07L5.576,9.4Z" transform="translate(0 2)" fill="#ffffff"></path>
</svg>
</span>
<input type="text" class="form-control" placeholder="placeholder">
</div>
<div class="invalid-feedback d-block tiny mt-1">
Please provide a valid state
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label form-label-xl">Label</label>
<div class="form-file form-file-xl">
<input type="file" class="form-file-input" id="customFileXl">
<label class="form-file-label" for="customFileLg">
<span class="form-file-text">placeholder</span>
<span class="form-file-button btn-primary">Browse</span>
</label>
</div>
<div class="invalid-feedback d-block tiny mt-1">
Please provide a valid state
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label form-label-lg">Label</label>
<div class="form-file form-file-lg">
<input type="file" class="form-file-input" id="customFileLg">
<label class="form-file-label" for="customFileLg">
<span class="form-file-text">placeholder</span>
<span class="form-file-button btn-primary">Browse</span>
</label>
</div>
<div class="invalid-feedback d-block tiny mt-1">
Please provide a valid state
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label">Label</label>
<div class="form-file">
<input type="file" class="form-file-input" id="customFile">
<label class="form-file-label" for="customFileLg">
<span class="form-file-text">placeholder</span>
<span class="form-file-button btn-primary">Browse</span>
</label>
</div>
<div class="invalid-feedback d-block tiny mt-1">
Please provide a valid state
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label form-label-sm">Label</label>
<div class="form-file form-file-sm">
<input type="file" class="form-file-input" id="customFileSm">
<label class="form-file-label" for="customFileSm">
<span class="form-file-text">placeholder</span>
<span class="form-file-button btn-primary">Browse</span>
</label>
</div>
<div class="invalid-feedback d-block tiny mt-1">
Please provide a valid state
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label form-label-xl">Label</label>
<textarea class="form-control form-control-xl" rows="3" placeholder="placeholder"></textarea>
<div class="invalid-feedback d-block tiny mt-1">
Please provide a valid state
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label form-label-lg">Label</label>
<textarea class="form-control form-control-lg" rows="2" placeholder="placeholder"></textarea>
<div class="invalid-feedback d-block tiny mt-1">
Please provide a valid state
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label">Label</label>
<textarea class="form-control" rows="3" placeholder="placeholder"></textarea>
<div class="invalid-feedback d-block tiny mt-1">
Please provide a valid state
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="mb-3">
<label class="form-label form-label-sm">Label</label>
<textarea class="form-control form-control-sm" rows="3" placeholder="placeholder"></textarea>
<div class="invalid-feedback d-block tiny mt-1">
Please provide a valid state
</div>
</div>
</div>
</div>
<div class="input-group mb-3">
<span class="input-group-text btn-primary" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-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="basic-addon2">
<span class="input-group-text btn-primary" 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 btn-primary" 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">
<span class="input-group-text btn-primary">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text btn-primary">.00</span>
</div>
<div class="input-group">
<span class="input-group-text btn-primary">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
Input groups wrap by default via flex-wrap: wrap
in order to accommodate custom form field validation within an input group. You may disable this with .flex-nowrap
.
<div class="input-group flex-nowrap">
<span class="input-group-text btn-primary" id="addon-wrapping">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div>
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.
Sizing on the individual input group elements isn’t supported.
<div class="input-group input-group-sm mb-3">
<span class="input-group-text btn-primary" id="inputGroup-sizing-sm2">
<svg data-name="icons/tabler/check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Check background" width="16" height="16" fill="none"/>
<path d="M14.758.213a.727.727,0,0,1,1.1.947l-.07.082-9.7,9.7a.727.727,0,0,1-.947.07l-.082-.07L.213,6.09a.727.727,0,0,1,.947-1.1l.082.07L5.576,9.4Z" transform="translate(0 2)" fill="#ffffff"/>
</svg>
</span>
<input type="text" class="form-control" placeholder="placeholder">
</div>
<div class="input-group mb-3">
<span class="input-group-text btn-primary" id="inputGroup-sizing-default2">
<svg data-name="icons/tabler/check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Check background" width="16" height="16" fill="none"/>
<path d="M14.758.213a.727.727,0,0,1,1.1.947l-.07.082-9.7,9.7a.727.727,0,0,1-.947.07l-.082-.07L.213,6.09a.727.727,0,0,1,.947-1.1l.082.07L5.576,9.4Z" transform="translate(0 2)" fill="#ffffff"/>
</svg>
</span>
<input type="text" class="form-control" placeholder="placeholder">
</div>
<div class="input-group input-group-lg mb-3">
<span class="input-group-text btn-primary" id="inputGroup-sizing-lg2">
<svg data-name="icons/tabler/check" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Check background" width="16" height="16" fill="none"/>
<path d="M14.758.213a.727.727,0,0,1,1.1.947l-.07.082-9.7,9.7a.727.727,0,0,1-.947.07l-.082-.07L.213,6.09a.727.727,0,0,1,.947-1.1l.082.07L5.576,9.4Z" transform="translate(0 2)" fill="#ffffff"/>
</svg>
</span>
<input type="text" class="form-control" placeholder="placeholder">
</div>
<div class="input-group input-group-xl">
<span class="input-group-text btn-primary" id="inputGroup-sizing-xl2">
<svg data-name="icons/tabler/check" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Check background" width="16" height="16" fill="none"/>
<path d="M14.758.213a.727.727,0,0,1,1.1.947l-.07.082-9.7,9.7a.727.727,0,0,1-.947.07l-.082-.07L.213,6.09a.727.727,0,0,1,.947-1.1l.082.07L5.576,9.4Z" transform="translate(0 2)" fill="#ffffff"/>
</svg>
</span>
<input type="text" class="form-control" placeholder="placeholder">
</div>
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 btn-primary">
<input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
<div class="input-group">
<div class="input-group-text btn-primary">
<input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input">
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
While multiple <input>
s are supported visually, validation styles are only available for input groups with a single <input>
.
<div class="input-group">
<span class="input-group-text btn-primary">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>
Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
<div class="input-group mb-3">
<label class="input-group-text btn-primary" 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 btn-primary" for="inputGroupSelect02">Options</label>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-primary" 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-primary" type="button">Button</button>
</div>
<div class="input-group mb-3">
<span class="input-group-text btn-primary" id="inputGroupFileAddon01">Upload</span>
<div class="form-file">
<input type="file" class="form-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="form-file-label" for="inputGroupFile01">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button btn-primary">Browse</span>
</label>
</div>
</div>
<div class="input-group mb-3">
<div class="form-file">
<input type="file" class="form-file-input" id="inputGroupFile02">
<label class="form-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button btn-primary">Browse</span>
</label>
</div>
<span class="input-group-text btn-primary" id="inputGroupFileAddon02">Upload</span>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-primary" type="button" id="inputGroupFileAddon03">Button</button>
<div class="form-file">
<input type="file" class="form-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
<label class="form-file-label" for="inputGroupFile03">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button btn-primary">Browse</span>
</label>
</div>
</div>
<div class="input-group">
<div class="form-file">
<input type="file" class="form-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="form-file-label" for="inputGroupFile04">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button btn-primary">Browse</span>
</label>
</div>
<button class="btn btn-outline-primary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
Screen readers will have trouble with your forms if you don’t include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
The exact technique to be used (<label>
elements hidden using the .sr-only
class, or use of the aria-label
and aria-labelledby
attributes, possibly in combination with aria-describedby
) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you’re implementing. The examples in this section provide a few suggested, case-specific approaches.