---
layout: docs
title: Input group
group: components
---
Easily extend form controls by adding text, buttons, or button groups on either side of textual ``s.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## 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.**
{% example html %}
@
@example.com
https://example.com/users/
$.00
$0.00
{% endexample %}
## 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.
{% example html %}
@
@
{% endexample %}
## Checkboxes and radio addons
Place any checkbox or radio option within an input group's addon instead of text.
{% example html %}
{% endexample %}
## Multiple addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
{% example html %}
$
$0.00
{% endexample %}
## Button addons
Buttons in input groups are a bit different and require one extra level of nesting. Instead of `.input-group-addon`, you'll need to use `.input-group-btn` to wrap the buttons. This is required due to default browser styles that cannot be overridden.
{% example html %}
{% endexample %}
## Buttons with dropdowns
{% example html %}
{% endexample %}
## Accessibility
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 (`