2014-07-13 09:59:31 +02:00
---
2015-08-15 07:45:55 +02:00
layout: docs
2014-07-13 09:59:31 +02:00
title: Input group
2017-10-23 04:39:32 +02:00
description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
2015-08-06 02:47:45 +02:00
group: components
2017-05-28 08:01:14 +02:00
toc: true
2014-07-13 09:59:31 +02:00
---
2014-07-13 10:12:02 +02:00
## Basic example
2014-03-17 03:03:53 +01:00
2018-04-05 23:03:54 +02:00
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.
2014-07-13 10:12:02 +02:00
2018-03-14 16:44:38 +01:00
{% capture example %}
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< span class = "input-group-text" id = "basic-addon1" > @< / span >
< / div >
2017-03-30 23:45:36 +02:00
< input type = "text" class = "form-control" placeholder = "Username" aria-label = "Username" aria-describedby = "basic-addon1" >
2014-03-17 03:03:53 +01:00
< / div >
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
2017-03-30 23:45:36 +02:00
< input type = "text" class = "form-control" placeholder = "Recipient's username" aria-label = "Recipient's username" aria-describedby = "basic-addon2" >
2017-12-23 00:29:49 +01:00
< div class = "input-group-append" >
< span class = "input-group-text" id = "basic-addon2" > @example.com< / span >
< / div >
2014-03-17 03:03:53 +01:00
< / div >
2017-12-23 00:29:49 +01:00
2015-08-05 07:29:45 +02:00
< label for = "basic-url" > Your vanity URL< / label >
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< span class = "input-group-text" id = "basic-addon3" > https://example.com/users/< / span >
< / div >
2015-08-05 07:29:45 +02:00
< input type = "text" class = "form-control" id = "basic-url" aria-describedby = "basic-addon3" >
< / div >
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< span class = "input-group-text" > $< / span >
< / div >
2016-02-08 08:48:47 +01:00
< input type = "text" class = "form-control" aria-label = "Amount (to the nearest dollar)" >
2017-12-23 00:29:49 +01:00
< div class = "input-group-append" >
< span class = "input-group-text" > .00< / span >
< / div >
2016-02-08 08:48:47 +01:00
< / div >
2018-01-03 06:18:14 +01:00
< div class = "input-group" >
< div class = "input-group-prepend" >
< span class = "input-group-text" > With textarea< / span >
< / div >
< textarea class = "form-control" aria-label = "With textarea" > < / textarea >
< / div >
2018-03-14 16:44:38 +01:00
{% endcapture %}
{% include example.html content=example %}
2014-03-17 03:03:53 +01:00
2018-09-17 21:02:56 +02:00
## Wrapping
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` .
{% capture example %}
< div class = "input-group flex-nowrap" >
< div class = "input-group-prepend" >
< span class = "input-group-text" id = "addon-wrapping" > @< / span >
< / div >
< input type = "text" class = "form-control" placeholder = "Username" aria-label = "Username" aria-describedby = "addon-wrapping" >
< / div >
{% endcapture %}
{% include example.html content=example %}
2014-07-13 10:12:02 +02:00
## 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.
2017-12-23 00:29:49 +01:00
**Sizing on the individual input group elements isn't supported.**
2018-03-14 16:44:38 +01:00
{% capture example %}
2017-12-23 00:29:49 +01:00
< div class = "input-group input-group-sm mb-3" >
< div class = "input-group-prepend" >
< span class = "input-group-text" id = "inputGroup-sizing-sm" > Small< / span >
< / div >
2018-05-22 11:52:22 +02:00
< input type = "text" class = "form-control" aria-label = "Sizing example input" aria-describedby = "inputGroup-sizing-sm" >
2017-12-23 00:29:49 +01:00
< / div >
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< span class = "input-group-text" id = "inputGroup-sizing-default" > Default< / span >
< / div >
2018-05-22 11:52:22 +02:00
< input type = "text" class = "form-control" aria-label = "Sizing example input" aria-describedby = "inputGroup-sizing-default" >
2014-03-17 03:03:53 +01:00
< / div >
2017-12-23 00:29:49 +01:00
< div class = "input-group input-group-lg" >
< div class = "input-group-prepend" >
< span class = "input-group-text" id = "inputGroup-sizing-lg" > Large< / span >
< / div >
2018-05-22 11:52:22 +02:00
< input type = "text" class = "form-control" aria-label = "Sizing example input" aria-describedby = "inputGroup-sizing-lg" >
2014-03-17 03:03:53 +01:00
< / div >
2018-03-14 16:44:38 +01:00
{% endcapture %}
{% include example.html content=example %}
2014-07-13 10:12:02 +02:00
2017-12-23 00:29:49 +01:00
## Checkboxes and radios
2014-03-17 03:03:53 +01:00
2014-07-13 10:12:02 +02:00
Place any checkbox or radio option within an input group's addon instead of text.
2014-03-17 03:03:53 +01:00
2018-03-14 16:44:38 +01:00
{% capture example %}
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< div class = "input-group-text" >
< input type = "checkbox" aria-label = "Checkbox for following text input" >
2014-07-13 10:12:02 +02:00
< / div >
< / div >
2017-12-23 00:29:49 +01:00
< input type = "text" class = "form-control" aria-label = "Text input with checkbox" >
< / div >
< div class = "input-group" >
< div class = "input-group-prepend" >
< div class = "input-group-text" >
2018-05-22 11:52:22 +02:00
< input type = "radio" aria-label = "Radio button for following text input" >
2014-07-13 10:12:02 +02:00
< / div >
< / div >
2017-12-23 00:29:49 +01:00
< input type = "text" class = "form-control" aria-label = "Text input with radio button" >
< / div >
2018-03-14 16:44:38 +01:00
{% endcapture %}
{% include example.html content=example %}
2017-12-23 00:29:49 +01:00
## Multiple inputs
While multiple `<input>` s are supported visually, validation styles are only available for input groups with a single `<input>` .
2018-03-14 16:44:38 +01:00
{% capture example %}
2017-12-23 00:29:49 +01:00
< div class = "input-group" >
< div class = "input-group-prepend" >
2018-05-22 11:52:22 +02:00
< span class = "input-group-text" > First and last name< / span >
2017-12-23 00:29:49 +01:00
< / div >
2018-05-22 11:52:22 +02:00
< input type = "text" aria-label = "First name" class = "form-control" >
< input type = "text" aria-label = "Last name" class = "form-control" >
2014-07-13 10:12:02 +02:00
< / div >
2018-03-14 16:44:38 +01:00
{% endcapture %}
{% include example.html content=example %}
2014-03-17 03:03:53 +01:00
2016-02-08 08:48:47 +01:00
## Multiple addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
2018-03-14 16:44:38 +01:00
{% capture example %}
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< span class = "input-group-text" > $< / span >
< span class = "input-group-text" > 0.00< / span >
2016-02-08 08:48:47 +01:00
< / div >
2018-05-22 11:52:22 +02:00
< input type = "text" class = "form-control" aria-label = "Dollar amount (with dot and two decimal places)" >
2017-12-23 00:29:49 +01:00
< / div >
< div class = "input-group" >
2018-05-22 11:52:22 +02:00
< input type = "text" class = "form-control" aria-label = "Dollar amount (with dot and two decimal places)" >
2017-12-23 00:29:49 +01:00
< div class = "input-group-append" >
< span class = "input-group-text" > $< / span >
< span class = "input-group-text" > 0.00< / span >
2016-02-08 08:48:47 +01:00
< / div >
< / div >
2018-03-14 16:44:38 +01:00
{% endcapture %}
{% include example.html content=example %}
2016-02-08 08:48:47 +01:00
2014-07-13 10:12:02 +02:00
## Button addons
2014-03-17 03:03:53 +01:00
2018-03-14 16:44:38 +01:00
{% capture example %}
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
2018-05-22 11:52:22 +02:00
< button class = "btn btn-outline-secondary" type = "button" id = "button-addon1" > Button< / button >
2014-07-13 10:12:02 +02:00
< / div >
2018-05-22 11:52:22 +02:00
< input type = "text" class = "form-control" placeholder = "" aria-label = "Example text with button addon" aria-describedby = "button-addon1" >
2017-12-23 00:29:49 +01:00
< / div >
< div class = "input-group mb-3" >
2018-05-22 11:52:22 +02:00
< input type = "text" class = "form-control" placeholder = "Recipient's username" aria-label = "Recipient's username" aria-describedby = "button-addon2" >
2017-12-23 00:29:49 +01:00
< div class = "input-group-append" >
2018-05-22 11:52:22 +02:00
< button class = "btn btn-outline-secondary" type = "button" id = "button-addon2" > Button< / button >
2014-07-13 10:12:02 +02:00
< / div >
< / div >
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
2018-05-22 11:52:22 +02:00
< div class = "input-group-prepend" id = "button-addon3" >
2017-12-23 00:29:49 +01:00
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< / div >
2018-05-22 11:52:22 +02:00
< input type = "text" class = "form-control" placeholder = "" aria-label = "Example text with two button addons" aria-describedby = "button-addon3" >
2017-12-23 00:29:49 +01:00
< / div >
< div class = "input-group" >
2018-05-22 11:52:22 +02:00
< input type = "text" class = "form-control" placeholder = "Recipient's username" aria-label = "Recipient's username with two button addons" aria-describedby = "button-addon4" >
< div class = "input-group-append" id = "button-addon4" >
2017-12-23 00:29:49 +01:00
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
2015-11-15 23:15:34 +01:00
< / div >
< / div >
2018-03-14 16:44:38 +01:00
{% endcapture %}
{% include example.html content=example %}
2014-03-17 03:03:53 +01:00
2014-07-13 10:12:02 +02:00
## Buttons with dropdowns
2018-03-14 16:44:38 +01:00
{% capture example %}
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< button class = "btn btn-outline-secondary dropdown-toggle" type = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / button >
< div class = "dropdown-menu" >
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
< a class = "dropdown-item" href = "#" > Something else here< / a >
< div role = "separator" class = "dropdown-divider" > < / div >
< a class = "dropdown-item" href = "#" > Separated link< / a >
2014-07-13 10:12:02 +02:00
< / div >
< / div >
2017-12-23 00:29:49 +01:00
< input type = "text" class = "form-control" aria-label = "Text input with dropdown button" >
< / div >
< div class = "input-group" >
< input type = "text" class = "form-control" aria-label = "Text input with dropdown button" >
< div class = "input-group-append" >
< button class = "btn btn-outline-secondary dropdown-toggle" type = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / button >
< div class = "dropdown-menu" >
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
< a class = "dropdown-item" href = "#" > Something else here< / a >
< div role = "separator" class = "dropdown-divider" > < / div >
< a class = "dropdown-item" href = "#" > Separated link< / a >
2014-07-13 10:12:02 +02:00
< / div >
2014-03-17 03:03:53 +01:00
< / div >
< / div >
2018-03-14 16:44:38 +01:00
{% endcapture %}
{% include example.html content=example %}
2014-03-17 03:03:53 +01:00
2014-07-13 10:12:02 +02:00
## Segmented buttons
2018-03-14 16:44:38 +01:00
{% capture example %}
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< button type = "button" class = "btn btn-outline-secondary" > Action< / button >
< button type = "button" class = "btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
< span class = "sr-only" > Toggle Dropdown< / span >
< / button >
< div class = "dropdown-menu" >
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
< a class = "dropdown-item" href = "#" > Something else here< / a >
< div role = "separator" class = "dropdown-divider" > < / div >
< a class = "dropdown-item" href = "#" > Separated link< / a >
2014-07-13 10:12:02 +02:00
< / div >
< / div >
2017-12-23 00:29:49 +01:00
< input type = "text" class = "form-control" aria-label = "Text input with segmented dropdown button" >
< / div >
< div class = "input-group" >
< input type = "text" class = "form-control" aria-label = "Text input with segmented dropdown button" >
< div class = "input-group-append" >
< button type = "button" class = "btn btn-outline-secondary" > Action< / button >
< button type = "button" class = "btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
< span class = "sr-only" > Toggle Dropdown< / span >
< / button >
< div class = "dropdown-menu" >
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
< a class = "dropdown-item" href = "#" > Something else here< / a >
< div role = "separator" class = "dropdown-divider" > < / div >
< a class = "dropdown-item" href = "#" > Separated link< / a >
2014-07-13 10:12:02 +02:00
< / div >
2014-03-17 03:03:53 +01:00
< / div >
< / div >
2018-03-14 16:44:38 +01:00
{% endcapture %}
{% include example.html content=example %}
2015-03-09 15:48:51 +01:00
2017-10-19 22:04:39 +02:00
## Custom forms
Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
### Custom select
2018-03-14 16:44:38 +01:00
{% capture example %}
2017-10-19 22:04:39 +02:00
< div class = "input-group mb-3" >
2017-12-23 00:29:49 +01:00
< div class = "input-group-prepend" >
< label class = "input-group-text" for = "inputGroupSelect01" > Options< / label >
< / div >
2017-10-22 23:04:46 +02:00
< select class = "custom-select" id = "inputGroupSelect01" >
2017-10-19 22:04:39 +02:00
< 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" >
2017-10-22 23:04:46 +02:00
< select class = "custom-select" id = "inputGroupSelect02" >
2017-10-19 22:04:39 +02:00
< option selected > Choose...< / option >
< option value = "1" > One< / option >
< option value = "2" > Two< / option >
< option value = "3" > Three< / option >
< / select >
2017-12-23 00:29:49 +01:00
< div class = "input-group-append" >
< label class = "input-group-text" for = "inputGroupSelect02" > Options< / label >
< / div >
2017-10-19 22:04:39 +02:00
< / div >
< div class = "input-group mb-3" >
2017-12-23 00:29:49 +01:00
< div class = "input-group-prepend" >
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< / div >
2018-05-22 11:52:22 +02:00
< select class = "custom-select" id = "inputGroupSelect03" aria-label = "Example select with button addon" >
2017-10-19 22:04:39 +02:00
< 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" >
2018-05-22 11:52:22 +02:00
< select class = "custom-select" id = "inputGroupSelect04" aria-label = "Example select with button addon" >
2017-10-19 22:04:39 +02:00
< option selected > Choose...< / option >
< option value = "1" > One< / option >
< option value = "2" > Two< / option >
< option value = "3" > Three< / option >
< / select >
2017-12-23 00:29:49 +01:00
< div class = "input-group-append" >
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< / div >
2017-10-19 22:04:39 +02:00
< / div >
2018-03-14 16:44:38 +01:00
{% endcapture %}
{% include example.html content=example %}
2017-10-19 22:04:39 +02:00
### Custom file input
2018-03-14 16:44:38 +01:00
{% capture example %}
2017-10-19 22:04:39 +02:00
< div class = "input-group mb-3" >
2017-12-23 00:29:49 +01:00
< div class = "input-group-prepend" >
2018-05-22 11:52:22 +02:00
< span class = "input-group-text" id = "inputGroupFileAddon01" > Upload< / span >
2017-12-23 00:29:49 +01:00
< / div >
2017-12-29 06:10:29 +01:00
< div class = "custom-file" >
2018-05-22 11:52:22 +02:00
< input type = "file" class = "custom-file-input" id = "inputGroupFile01" aria-describedby = "inputGroupFileAddon01" >
2017-12-29 06:10:29 +01:00
< label class = "custom-file-label" for = "inputGroupFile01" > Choose file< / label >
< / div >
2017-10-19 22:04:39 +02:00
< / div >
< div class = "input-group mb-3" >
2017-12-29 06:10:29 +01:00
< div class = "custom-file" >
< input type = "file" class = "custom-file-input" id = "inputGroupFile02" >
2018-05-22 11:52:22 +02:00
< label class = "custom-file-label" for = "inputGroupFile02" aria-describedby = "inputGroupFileAddon02" > Choose file< / label >
2017-12-29 06:10:29 +01:00
< / div >
2017-12-23 00:29:49 +01:00
< div class = "input-group-append" >
2018-05-22 11:52:22 +02:00
< span class = "input-group-text" id = "inputGroupFileAddon02" > Upload< / span >
2017-12-23 00:29:49 +01:00
< / div >
2017-10-19 22:04:39 +02:00
< / div >
< div class = "input-group mb-3" >
2017-12-23 00:29:49 +01:00
< div class = "input-group-prepend" >
2018-05-22 11:52:22 +02:00
< button class = "btn btn-outline-secondary" type = "button" id = "inputGroupFileAddon03" > Button< / button >
2017-12-23 00:29:49 +01:00
< / div >
2017-12-29 06:10:29 +01:00
< div class = "custom-file" >
2018-05-22 11:52:22 +02:00
< input type = "file" class = "custom-file-input" id = "inputGroupFile03" aria-describedby = "inputGroupFileAddon03" >
2017-12-29 06:10:29 +01:00
< label class = "custom-file-label" for = "inputGroupFile03" > Choose file< / label >
< / div >
2017-10-19 22:04:39 +02:00
< / div >
< div class = "input-group" >
2017-12-29 06:10:29 +01:00
< div class = "custom-file" >
2018-05-22 11:52:22 +02:00
< input type = "file" class = "custom-file-input" id = "inputGroupFile04" aria-describedby = "inputGroupFileAddon04" >
2017-12-29 06:10:29 +01:00
< label class = "custom-file-label" for = "inputGroupFile04" > Choose file< / label >
< / div >
2017-12-23 00:29:49 +01:00
< div class = "input-group-append" >
2018-05-22 11:52:22 +02:00
< button class = "btn btn-outline-secondary" type = "button" id = "inputGroupFileAddon04" > Button< / button >
2017-12-23 00:29:49 +01:00
< / div >
2017-10-19 22:04:39 +02:00
< / div >
2018-03-14 16:44:38 +01:00
{% endcapture %}
{% include example.html content=example %}
2017-10-19 22:04:39 +02:00
2015-03-09 15:48:51 +01:00
## 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.
2017-03-30 23:45:36 +02:00
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.