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.
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
group: forms
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
2019-01-08 17:33:28 +01:00
{{< example > }}
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" id = "basic-addon1" > @< / span >
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" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" id = "basic-addon2" > @example.com< / span >
2014-03-17 03:03:53 +01:00
< / div >
2017-12-23 00:29:49 +01:00
2020-03-31 20:02:57 +02:00
< label for = "basic-url" class = "form-label" > Your vanity URL< / label >
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" id = "basic-addon3" > https://example.com/users/< / span >
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" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" > $< / span >
2016-02-08 08:48:47 +01:00
< input type = "text" class = "form-control" aria-label = "Amount (to the nearest dollar)" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" > .00< / span >
2016-02-08 08:48:47 +01:00
< / div >
2018-01-03 06:18:14 +01:00
< div class = "input-group" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" > With textarea< / span >
2018-01-03 06:18:14 +01:00
< textarea class = "form-control" aria-label = "With textarea" > < / textarea >
< / div >
2019-01-08 17:33:28 +01:00
{{< / 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` .
2019-01-08 17:33:28 +01:00
{{< example > }}
2018-09-17 21:02:56 +02:00
< div class = "input-group flex-nowrap" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" id = "addon-wrapping" > @< / span >
2018-09-17 21:02:56 +02:00
< input type = "text" class = "form-control" placeholder = "Username" aria-label = "Username" aria-describedby = "addon-wrapping" >
< / div >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2018-09-17 21:02:56 +02:00
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.**
2019-01-08 17:33:28 +01:00
{{< example > }}
2017-12-23 00:29:49 +01:00
< div class = "input-group input-group-sm mb-3" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" id = "inputGroup-sizing-sm" > Small< / span >
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" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" id = "inputGroup-sizing-default" > Default< / span >
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" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" id = "inputGroup-sizing-lg" > Large< / span >
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 >
2019-01-08 17:33:28 +01:00
{{< / 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
2019-01-08 17:33:28 +01:00
{{< example > }}
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
2019-12-19 15:28:40 +01:00
< div class = "input-group-text" >
< input class = "form-check-input" type = "checkbox" value = "" aria-label = "Checkbox for following text input" >
2014-07-13 10:12:02 +02:00
< / 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" >
2019-12-19 15:28:40 +01:00
< div class = "input-group-text" >
< input class = "form-check-input" type = "radio" value = "" aria-label = "Radio button for following text input" >
2014-07-13 10:12:02 +02:00
< / div >
2017-12-23 00:29:49 +01:00
< input type = "text" class = "form-control" aria-label = "Text input with radio button" >
< / div >
2019-01-08 17:33:28 +01:00
{{< / 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>` .
2019-01-08 17:33:28 +01:00
{{< example > }}
2017-12-23 00:29:49 +01:00
< div class = "input-group" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" > First and last name< / span >
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 >
2019-01-08 17:33:28 +01:00
{{< / 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.
2019-01-08 17:33:28 +01:00
{{< example > }}
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" > $< / span >
< span class = "input-group-text" > 0.00< / span >
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)" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" > $< / span >
< span class = "input-group-text" > 0.00< / span >
2016-02-08 08:48:47 +01:00
< / div >
2019-01-08 17:33:28 +01:00
{{< / 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
2019-01-08 17:33:28 +01:00
{{< example > }}
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
2019-12-19 15:28:40 +01:00
< button class = "btn btn-outline-secondary" type = "button" id = "button-addon1" > Button< / button >
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" >
2019-12-19 15:28:40 +01:00
< button class = "btn btn-outline-secondary" type = "button" id = "button-addon2" > Button< / button >
2014-07-13 10:12:02 +02:00
< / div >
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
2019-12-19 15:28:40 +01:00
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< input type = "text" class = "form-control" placeholder = "" aria-label = "Example text with two button addons" >
2017-12-23 00:29:49 +01:00
< / div >
< div class = "input-group" >
2019-12-19 15:28:40 +01:00
< input type = "text" class = "form-control" placeholder = "Recipient's username" aria-label = "Recipient's username with two button addons" >
< 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 >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2014-03-17 03:03:53 +01:00
2014-07-13 10:12:02 +02:00
## Buttons with dropdowns
2019-01-08 17:33:28 +01:00
{{< example > }}
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
2019-12-19 15:28:40 +01:00
< button class = "btn btn-outline-secondary dropdown-toggle" type = "button" data-toggle = "dropdown" aria-expanded = "false" > Dropdown< / button >
2019-12-29 02:21:20 +01:00
< ul class = "dropdown-menu" >
< li > < a class = "dropdown-item" href = "#" > Action< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Another action< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Something else here< / a > < / li >
< li > < hr class = "dropdown-divider" > < / li >
< li > < a class = "dropdown-item" href = "#" > Separated link< / a > < / li >
< / ul >
2017-12-23 00:29:49 +01:00
< input type = "text" class = "form-control" aria-label = "Text input with dropdown button" >
< / div >
2019-12-19 15:28:40 +01:00
< div class = "input-group mb-3" >
2017-12-23 00:29:49 +01:00
< input type = "text" class = "form-control" aria-label = "Text input with dropdown button" >
2019-12-19 15:28:40 +01:00
< button class = "btn btn-outline-secondary dropdown-toggle" type = "button" data-toggle = "dropdown" aria-expanded = "false" > Dropdown< / button >
2019-12-29 02:21:20 +01:00
< ul class = "dropdown-menu dropdown-menu-right" >
< li > < a class = "dropdown-item" href = "#" > Action< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Another action< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Something else here< / a > < / li >
< li > < hr class = "dropdown-divider" > < / li >
< li > < a class = "dropdown-item" href = "#" > Separated link< / a > < / li >
< / ul >
2019-12-19 15:28:40 +01:00
< / div >
< div class = "input-group" >
< button class = "btn btn-outline-secondary dropdown-toggle" type = "button" data-toggle = "dropdown" aria-expanded = "false" > Dropdown< / button >
2019-12-29 02:21:20 +01:00
< ul class = "dropdown-menu" >
< li > < a class = "dropdown-item" href = "#" > Action before< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Another action before< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Something else here< / a > < / li >
< li > < hr class = "dropdown-divider" > < / li >
< li > < a class = "dropdown-item" href = "#" > Separated link< / a > < / li >
< / ul >
2019-12-19 15:28:40 +01:00
< input type = "text" class = "form-control" aria-label = "Text input with 2 dropdown buttons" >
< button class = "btn btn-outline-secondary dropdown-toggle" type = "button" data-toggle = "dropdown" aria-expanded = "false" > Dropdown< / button >
2019-12-29 02:21:20 +01:00
< ul class = "dropdown-menu dropdown-menu-right" >
< li > < a class = "dropdown-item" href = "#" > Action< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Another action< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Something else here< / a > < / li >
< li > < hr class = "dropdown-divider" > < / li >
< li > < a class = "dropdown-item" href = "#" > Separated link< / a > < / li >
< / ul >
2014-03-17 03:03:53 +01:00
< / div >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2014-03-17 03:03:53 +01:00
2014-07-13 10:12:02 +02:00
## Segmented buttons
2019-01-08 17:33:28 +01:00
{{< example > }}
2017-12-23 00:29:49 +01:00
< div class = "input-group mb-3" >
2019-12-19 15:28:40 +01:00
< 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-expanded = "false" >
2020-07-03 13:38:11 +02:00
< span class = "visually-hidden" > Toggle Dropdown< / span >
2019-12-19 15:28:40 +01:00
< / button >
2019-12-29 02:21:20 +01:00
< ul class = "dropdown-menu" >
< li > < a class = "dropdown-item" href = "#" > Action< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Another action< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Something else here< / a > < / li >
< li > < hr class = "dropdown-divider" > < / li >
< li > < a class = "dropdown-item" href = "#" > Separated link< / a > < / li >
< / ul >
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" >
2019-12-19 15:28:40 +01:00
< 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-expanded = "false" >
2020-07-03 13:38:11 +02:00
< span class = "visually-hidden" > Toggle Dropdown< / span >
2019-12-19 15:28:40 +01:00
< / button >
2019-12-29 02:21:20 +01:00
< ul class = "dropdown-menu dropdown-menu-right" >
< li > < a class = "dropdown-item" href = "#" > Action< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Another action< / a > < / li >
< li > < a class = "dropdown-item" href = "#" > Something else here< / a > < / li >
< li > < hr class = "dropdown-divider" > < / li >
< li > < a class = "dropdown-item" href = "#" > Separated link< / a > < / li >
< / ul >
2014-03-17 03:03:53 +01:00
< / div >
2019-01-08 17:33:28 +01:00
{{< / 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
2019-01-08 17:33:28 +01:00
{{< example > }}
2017-10-19 22:04:39 +02:00
< div class = "input-group mb-3" >
2019-12-19 15:28:40 +01:00
< label class = "input-group-text" for = "inputGroupSelect01" > Options< / label >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< select class = "form-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" >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< select class = "form-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 >
2019-12-19 15:28:40 +01:00
< label class = "input-group-text" for = "inputGroupSelect02" > Options< / label >
2017-10-19 22:04:39 +02:00
< / div >
< div class = "input-group mb-3" >
2019-12-19 15:28:40 +01:00
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< select class = "form-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" >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< select class = "form-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 >
2019-12-19 15:28:40 +01:00
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
2017-10-19 22:04:39 +02:00
< / div >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2017-10-19 22:04:39 +02:00
### Custom file input
2019-01-08 17:33:28 +01:00
{{< example > }}
2017-10-19 22:04:39 +02:00
< div class = "input-group mb-3" >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" id = "inputGroupFileAddon01" > Upload< / span >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< div class = "form-file" >
< input type = "file" class = "form-file-input" id = "inputGroupFile01" aria-describedby = "inputGroupFileAddon01" >
< label class = "form-file-label" for = "inputGroupFile01" >
< span class = "form-file-text" > Choose file...< / span >
< span class = "form-file-button" > Browse< / span >
2019-04-26 20:26:10 +02:00
< / label >
2017-12-29 06:10:29 +01:00
< / div >
2017-10-19 22:04:39 +02:00
< / div >
< div class = "input-group mb-3" >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< div class = "form-file" >
< input type = "file" class = "form-file-input" id = "inputGroupFile02" >
< label class = "form-file-label" for = "inputGroupFile02" aria-describedby = "inputGroupFileAddon02" >
< span class = "form-file-text" > Choose file...< / span >
< span class = "form-file-button" > Browse< / span >
2019-04-26 20:26:10 +02:00
< / label >
2017-12-29 06:10:29 +01:00
< / div >
2019-12-19 15:28:40 +01:00
< span class = "input-group-text" id = "inputGroupFileAddon02" > Upload< / span >
2017-10-19 22:04:39 +02:00
< / div >
< div class = "input-group mb-3" >
2019-12-19 15:28:40 +01:00
< button class = "btn btn-outline-secondary" type = "button" id = "inputGroupFileAddon03" > Button< / button >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< div class = "form-file" >
< input type = "file" class = "form-file-input" id = "inputGroupFile03" aria-describedby = "inputGroupFileAddon03" >
< label class = "form-file-label" for = "inputGroupFile03" >
< span class = "form-file-text" > Choose file...< / span >
< span class = "form-file-button" > Browse< / span >
2019-04-26 20:26:10 +02:00
< / label >
2017-12-29 06:10:29 +01:00
< / div >
2017-10-19 22:04:39 +02:00
< / div >
< div class = "input-group" >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< div class = "form-file" >
< input type = "file" class = "form-file-input" id = "inputGroupFile04" aria-describedby = "inputGroupFileAddon04" >
< label class = "form-file-label" for = "inputGroupFile04" >
< span class = "form-file-text" > Choose file...< / span >
< span class = "form-file-button" > Browse< / span >
2019-04-26 20:26:10 +02:00
< / label >
2017-12-29 06:10:29 +01:00
< / div >
2019-12-19 15:28:40 +01:00
< button class = "btn btn-outline-secondary" type = "button" id = "inputGroupFileAddon04" > Button< / button >
2017-10-19 22:04:39 +02:00
< / div >
2019-01-08 17:33:28 +01:00
{{< / 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.
2020-07-03 13:38:11 +02:00
The exact technique to be used (`< label > ` elements hidden using the `.visually-hidden` 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.