Bootstrap 5 Input Group
Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
🤖 Looking for the LLM-optimized version?View llm.md
Other frameworks
CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.
On this page
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.
@
@example.com
https://example.com/users/
$.00
@
With textarea
html
<divclass="input-group mb-3"><spanclass="input-group-text"id="basic-addon1">@</span><inputtype="text"class="form-control"placeholder="Username"aria-label="Username"aria-describedby="basic-addon1"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholder="Recipient's username"aria-label="Recipient's username"aria-describedby="basic-addon2"><spanclass="input-group-text"id="basic-addon2">@example.com</span></div><labelfor="basic-url"class="form-label">Your vanity URL</label><divclass="input-group mb-3"><spanclass="input-group-text"id="basic-addon3">https://example.com/users/</span><inputtype="text"class="form-control"id="basic-url"aria-describedby="basic-addon3"></div><divclass="input-group mb-3"><spanclass="input-group-text">$</span><inputtype="text"class="form-control"aria-label="Amount (to the nearest dollar)"><spanclass="input-group-text">.00</span></div><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholder="Username"aria-label="Username"><spanclass="input-group-text">@</span><inputtype="text"class="form-control"placeholder="Server"aria-label="Server"></div><divclass="input-group"><spanclass="input-group-text">With textarea</span><textareaclass="form-control"aria-label="With textarea"></textarea></div>Wrapping
Input groups wrap by default viaflex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with.flex-nowrap.
@
html
<divclass="input-group flex-nowrap"><spanclass="input-group-text"id="addon-wrapping">@</span><inputtype="text"class="form-control"placeholder="Username"aria-label="Username"aria-describedby="addon-wrapping"></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.
Sizing on the individual input group elements isn’t supported.
Small
Default
Large
html
<divclass="input-group input-group-sm mb-3"><spanclass="input-group-text"id="inputGroup-sizing-sm">Small</span><inputtype="text"class="form-control"aria-label="Sizing example input"aria-describedby="inputGroup-sizing-sm"></div><divclass="input-group mb-3"><spanclass="input-group-text"id="inputGroup-sizing-default">Default</span><inputtype="text"class="form-control"aria-label="Sizing example input"aria-describedby="inputGroup-sizing-default"></div><divclass="input-group input-group-lg"><spanclass="input-group-text"id="inputGroup-sizing-lg">Large</span><inputtype="text"class="form-control"aria-label="Sizing example input"aria-describedby="inputGroup-sizing-lg"></div>Checkboxes and radios
Place any checkbox or radio option within an input group’s addon instead of text. We recommend adding.mt-0 to the.form-check-input when there’s no visible text next to the input.
html
<divclass="input-group mb-3"><divclass="input-group-text"><inputclass="form-check-input mt-0"type="checkbox"value=""aria-label="Checkbox for following text input"></div><inputtype="text"class="form-control"aria-label="Text input with checkbox"></div><divclass="input-group"><divclass="input-group-text"><inputclass="form-check-input mt-0"type="radio"value=""aria-label="Radio button for following text input"></div><inputtype="text"class="form-control"aria-label="Text input with radio button"></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
html
<divclass="input-group"><spanclass="input-group-text">First and last name</span><inputtype="text"aria-label="First name"class="form-control"><inputtype="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
html
<divclass="input-group mb-3"><spanclass="input-group-text">$</span><spanclass="input-group-text">0.00</span><inputtype="text"class="form-control"aria-label="Dollar amount (with dot and two decimal places)"></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="Dollar amount (with dot and two decimal places)"><spanclass="input-group-text">$</span><spanclass="input-group-text">0.00</span></div>Button addons
html
<divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary"type="button"id="button-addon1">Button</button><inputtype="text"class="form-control"placeholder=""aria-label="Example text with button addon"aria-describedby="button-addon1"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholder="Recipient's username"aria-label="Recipient's username"aria-describedby="button-addon2"><buttonclass="btn btn-outline-secondary"type="button"id="button-addon2">Button</button></div><divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary"type="button">Button</button><buttonclass="btn btn-outline-secondary"type="button">Button</button><inputtype="text"class="form-control"placeholder=""aria-label="Example text with two button addons"></div><divclass="input-group"><inputtype="text"class="form-control"placeholder="Recipient's username"aria-label="Recipient's username with two button addons"><buttonclass="btn btn-outline-secondary"type="button">Button</button><buttonclass="btn btn-outline-secondary"type="button">Button</button></div>Buttons with dropdowns
html
<divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-coreui-toggle="dropdown"aria-expanded="false">Dropdown</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul><inputtype="text"class="form-control"aria-label="Text input with dropdown button"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"aria-label="Text input with dropdown button"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-coreui-toggle="dropdown"aria-expanded="false">Dropdown</button><ulclass="dropdown-menu dropdown-menu-end"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul></div><divclass="input-group"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-coreui-toggle="dropdown"aria-expanded="false">Dropdown</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Action before</a></li><li><aclass="dropdown-item"href="#">Another action before</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul><inputtype="text"class="form-control"aria-label="Text input with 2 dropdown buttons"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-coreui-toggle="dropdown"aria-expanded="false">Dropdown</button><ulclass="dropdown-menu dropdown-menu-end"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul></div>Segmented buttons
html
<divclass="input-group mb-3"><buttontype="button"class="btn btn-outline-secondary">Action</button><buttontype="button"class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"data-coreui-toggle="dropdown"aria-expanded="false"><spanclass="visually-hidden">Toggle Dropdown</span></button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul><inputtype="text"class="form-control"aria-label="Text input with segmented dropdown button"></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="Text input with segmented dropdown button"><buttontype="button"class="btn btn-outline-secondary">Action</button><buttontype="button"class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"data-coreui-toggle="dropdown"aria-expanded="false"><spanclass="visually-hidden">Toggle Dropdown</span></button><ulclass="dropdown-menu dropdown-menu-end"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul></div>Custom forms
Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
Custom select
html
<divclass="input-group mb-3"><labelclass="input-group-text"for="inputGroupSelect01">Options</label><selectclass="form-select"id="inputGroupSelect01"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select></div><divclass="input-group mb-3"><selectclass="form-select"id="inputGroupSelect02"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><labelclass="input-group-text"for="inputGroupSelect02">Options</label></div><divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary"type="button">Button</button><selectclass="form-select"id="inputGroupSelect03"aria-label="Example select with button addon"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select></div><divclass="input-group"><selectclass="form-select"id="inputGroupSelect04"aria-label="Example select with button addon"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><buttonclass="btn btn-outline-secondary"type="button">Button</button></div>Custom file input
html
<divclass="input-group mb-3"><labelclass="input-group-text"for="inputGroupFile01">Upload</label><inputtype="file"class="form-control"id="inputGroupFile01"></div><divclass="input-group mb-3"><inputtype="file"class="form-control"id="inputGroupFile02"><labelclass="input-group-text"for="inputGroupFile02">Upload</label></div><divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary"type="button"id="inputGroupFileAddon03">Button</button><inputtype="file"class="form-control"id="inputGroupFile03"aria-describedby="inputGroupFileAddon03"aria-label="Upload"></div><divclass="input-group"><inputtype="file"class="form-control"id="inputGroupFile04"aria-describedby="inputGroupFileAddon04"aria-label="Upload"><buttonclass="btn btn-outline-secondary"type="button"id="inputGroupFileAddon04">Button</button></div>Customizing
SASS variables
scss/_variables.scss
$input-group-addon-padding-y:$input-padding-y;$input-group-addon-padding-x:$input-padding-x;$input-group-addon-font-weight:$input-font-weight;$input-group-addon-color:$input-color;$input-group-addon-bg:var(--#{$prefix}tertiary-bg);$input-group-addon-border-color:$input-border-color;CoreUI vs Bootstrap
While this Input Group component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.
What sets CoreUI apart from Bootstrap?
- ✅Fully compatible with Bootstrap – Built directly on Bootstrap, all classes and behaviors work as expected.
- 🧠Framework-native versions – CoreUI provides dedicated libraries forReact.js,Vue.js, andAngular, unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
- 👨💻Maintained by a full-time team – CoreUI is developed as a professional product, not a volunteer-driven project.
- 📦More built-in components – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
- 🛠️Sass Modules support today – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
- 🌍Better LTR/RTL support – Uses modern CSS logical properties for seamless bidirectional layout support.
- 🔒LTS (Long-Term Support) – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.
Whether you’re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.
👉Explore CoreUI Bootstrap Components
👉Compare CoreUI vs Bootstrap