# Input groups

Extend form controls by adding text or buttons before, after, or on both sides of any text-based `<input>`. Use `.input-group` with an `.input-group-addon` or `.input-group-btn` to prepend or append elements to a single `.form-control`.

#### Textual `<input>`s only

Avoid using `<select>` elements here as they cannot be fully styled in WebKit browsers.

Avoid using `<textarea>` elements here as their `rows` attribute will not be respected in some cases.

#### Tooltips & popovers in input groups require special setting

When using tooltips or popovers on elements within an `.input-group`, you'll have to specify the option `container: 'body'` to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

#### Don't mix with other components

Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

#### Always add labels

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 (visible `<label>` elements, `<label>` elements hidden using the `.sr-only` class, or use of the `aria-label`, `aria-labelledby`, `aria-describedby`, `title` or `placeholder` attribute) 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.

## 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 add-ons (`.input-group-addon` or `.input-group-btn`) on a single side.

We do not support multiple form-controls in a single input group.

@
@example.com
$ .00
Your vanity URL
https://example.com/users/
{% highlight html %}
@
@example.com
$ .00
Your vanity URL
https://example.com/users/
{% endhighlight %}

## 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.

@
@
@
{% highlight html %}
@
@
@
{% endhighlight %}

## Checkboxes and radio addons

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

{% highlight html %}
{% endhighlight %}

## 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.

{% highlight html %}
{% endhighlight %}

## Buttons with dropdowns

{% highlight html %}
{% endhighlight %}

## Segmented buttons

{% highlight html %}
{% endhighlight %}

## Multiple buttons

While you can only have one add-on per side, you can have multiple buttons inside a single `.input-group-btn`.

{% highlight html %}
{% endhighlight %}