input-group.md

layout: docs
title: Input group
description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
group: components
toc: true

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.

{% capture example %}

@

@example.com

Your vanity URL

https://example.com/users/

$

.00

With textarea

{% endcapture %} {% include example.html content=example %}

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.

{% capture example %}

Small

Default

Large

{% endcapture %} {% include example.html content=example %}

Checkboxes and radios

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

{% capture example %}

{% endcapture %} {% include example.html content=example %}

Multiple inputs

While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>.

{% capture example %}

First and last name

{% endcapture %} {% include example.html content=example %}

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

{% capture example %}

$ 0.00

$ 0.00

{% endcapture %} {% include example.html content=example %}

Button addons

{% capture example %}

Button

Button

Button Button

Button Button

{% endcapture %} {% include example.html content=example %}

Buttons with dropdowns

{% capture example %}

Dropdown

Action Another action Something else here

Separated link

Dropdown

Action Another action Something else here

Separated link

{% endcapture %} {% include example.html content=example %}

Segmented buttons

{% capture example %}

Action Toggle Dropdown

Action Another action Something else here

Separated link

Action Toggle Dropdown

Action Another action Something else here

Separated link

{% endcapture %} {% include example.html content=example %}

Custom forms

Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.

Custom select

{% capture example %}

Options

Choose... One Two Three

Choose... One Two Three

Options

Button

Choose... One Two Three

Choose... One Two Three

Button

{% endcapture %} {% include example.html content=example %}

Custom file input

{% capture example %}

Upload

Choose file

Choose file

Upload

Button

Choose file

Choose file

Button

{% endcapture %} {% include example.html content=example %}

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