2020-05-12 20:50:21 +03:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "description" content = "Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs." >
< meta name = "author" content = "Mark Otto, Jacob Thornton, and Bootstrap contributors" >
2020-08-04 19:36:55 +03:00
< meta name = "generator" content = "Jekyll v4.1.1" >
2020-05-12 20:50:21 +03:00
< meta name = "docsearch:language" content = "en" >
< meta name = "docsearch:version" content = "4.5" >
< title > Input group · Bootstrap v4.5< / title >
< link rel = "canonical" href = "https://getbootstrap.com/docs/4.5/components/input-group/" >
<!-- Bootstrap core CSS -->
2020-10-13 18:59:54 +03:00
< link href = "/docs/4.5/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin = "anonymous" >
2020-05-12 20:50:21 +03:00
<!-- Documentation extras -->
< link href = "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel = "stylesheet" >
< link href = "/docs/4.5/assets/css/docs.min.css" rel = "stylesheet" >
<!-- Favicons -->
< link rel = "apple-touch-icon" href = "/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes = "180x180" >
< link rel = "icon" href = "/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes = "32x32" type = "image/png" >
< link rel = "icon" href = "/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes = "16x16" type = "image/png" >
< link rel = "manifest" href = "/docs/4.5/assets/img/favicons/manifest.json" >
< link rel = "mask-icon" href = "/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color = "#563d7c" >
< link rel = "icon" href = "/docs/4.5/assets/img/favicons/favicon.ico" >
< meta name = "msapplication-config" content = "/docs/4.5/assets/img/favicons/browserconfig.xml" >
< meta name = "theme-color" content = "#563d7c" >
<!-- Twitter -->
< meta name = "twitter:card" content = "summary" >
< meta name = "twitter:site" content = "@getbootstrap" >
< meta name = "twitter:creator" content = "@getbootstrap" >
< meta name = "twitter:title" content = "Input group" >
< meta name = "twitter:description" content = "Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs." >
< meta name = "twitter:image" content = "https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png" >
<!-- Facebook -->
< meta property = "og:url" content = "https://getbootstrap.com/docs/4.5/components/input-group/" >
< meta property = "og:title" content = "Input group" >
< meta property = "og:description" content = "Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs." >
< meta property = "og:type" content = "website" >
< meta property = "og:image" content = "https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png" >
< meta property = "og:image:type" content = "image/png" >
< meta property = "og:image:width" content = "1200" >
< meta property = "og:image:height" content = "630" >
< script >
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
< / script >
< script async src = "https://www.google-analytics.com/analytics.js" > < / script >
< / head >
< body >
2020-08-04 19:36:55 +03:00
< div class = "skippy overflow-hidden" >
< div class = "container-xl" >
< a class = "sr-only sr-only-focusable d-inline-flex p-2 m-1" href = "#content" > Skip to main content< / a > < a class = "sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href = "#bd-docs-nav" > Skip to docs navigation< / a > < / div >
< / div >
2020-05-12 20:50:21 +03:00
< header class = "navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar" >
< a class = "navbar-brand mr-0 mr-md-2" href = "/" aria-label = "Bootstrap" > < svg xmlns = "http://www.w3.org/2000/svg" width = "36" height = "36" class = "d-block" viewBox = "0 0 612 612" role = "img" focusable = "false" > < title > Bootstrap< / title > < path fill = "currentColor" d = "M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z" / > < path fill = "currentColor" d = "M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z" / > < / svg > < / a >
< div class = "navbar-nav-scroll" >
< ul class = "navbar-nav bd-navbar-nav flex-row" >
< li class = "nav-item" >
< a class = "nav-link " href = "/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');" > Home< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link active" href = "/docs/4.5/getting-started/introduction/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Docs');" > Documentation< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link " href = "/docs/4.5/examples/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Examples');" > Examples< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "https://icons.getbootstrap.com/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target = "_blank" rel = "noopener" > Icons< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "https://themes.getbootstrap.com/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target = "_blank" rel = "noopener" > Themes< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "https://expo.getbootstrap.com/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target = "_blank" rel = "noopener" > Expo< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "https://blog.getbootstrap.com/" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target = "_blank" rel = "noopener" > Blog< / a >
< / li >
< / ul >
< / div >
< ul class = "navbar-nav ml-md-auto" >
< li class = "nav-item dropdown" >
< a class = "nav-item nav-link dropdown-toggle mr-md-2" href = "#" id = "bd-versions" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
v4.5
< / a >
< div class = "dropdown-menu dropdown-menu-md-right" aria-labelledby = "bd-versions" >
< a class = "dropdown-item active" href = "/docs/4.5/" > Latest (4.5.x)< / a >
< div class = "dropdown-divider" > < / div >
< a class = "dropdown-item" href = "https://getbootstrap.com/docs/3.4/" > v3.4.1< / a >
< a class = "dropdown-item" href = "https://getbootstrap.com/2.3.2/" > v2.3.2< / a >
< div class = "dropdown-divider" > < / div >
< a class = "dropdown-item" href = "/docs/versions/" > All versions< / a >
< / div >
< / li >
< li class = "nav-item" >
< a class = "nav-link pl-2 pr-1 mx-1 py-3 my-n2" href = "https://github.com/twbs" target = "_blank" rel = "noopener" aria-label = "GitHub" > < svg xmlns = "http://www.w3.org/2000/svg" class = "navbar-nav-svg" viewBox = "0 0 512 499.36" role = "img" focusable = "false" > < title > GitHub< / title > < path fill = "currentColor" fill-rule = "evenodd" d = "M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" / > < / svg > < / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link px-1 mx-1 py-3 my-n2" href = "https://twitter.com/getbootstrap" target = "_blank" rel = "noopener" aria-label = "Twitter" > < svg xmlns = "http://www.w3.org/2000/svg" class = "navbar-nav-svg" viewBox = "0 0 512 416.32" role = "img" focusable = "false" > < title > Twitter< / title > < path fill = "currentColor" d = "M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" / > < / svg > < / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link px-1 mx-1 py-3 my-n2" href = "https://bootstrap-slack.herokuapp.com/" target = "_blank" rel = "noopener" aria-label = "Slack" > < svg xmlns = "http://www.w3.org/2000/svg" class = "navbar-nav-svg" viewBox = "0 0 512 512" role = "img" focusable = "false" > < title > Slack< / title > < path fill = "currentColor" d = "M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z" / > < path fill = "currentColor" d = "M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" / > < / svg > < / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link px-1 mx-1 py-3 my-n2" href = "https://opencollective.com/bootstrap/" target = "_blank" rel = "noopener" aria-label = "Open Collective" > < svg xmlns = "http://www.w3.org/2000/svg" fill = "currentColor" fill-rule = "evenodd" class = "navbar-nav-svg" viewBox = "0 0 40 41" role = "img" focusable = "false" > < title > Open Collective< / title > < path fill-opacity = ".4" d = "M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z" / > < path d = "M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z" / > < / svg > < / a >
< / li >
< / ul >
< a class = "btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href = "/docs/4.5/getting-started/download/" > Download< / a >
< / header >
< div class = "container-fluid" >
< div class = "row flex-xl-nowrap" >
< div class = "col-md-3 col-xl-2 bd-sidebar" >
< form role = "search" class = "bd-search d-flex align-items-center" >
< input type = "search" class = "form-control" id = "search-input" placeholder = "Search..." aria-label = "Search for..." autocomplete = "off" data-docs-version = "4.5" >
< button class = "btn bd-search-docs-toggle d-md-none p-0 ml-3" type = "button" data-toggle = "collapse" data-target = "#bd-docs-nav" aria-controls = "bd-docs-nav" aria-expanded = "false" aria-label = "Toggle docs navigation" > < svg xmlns = "http://www.w3.org/2000/svg" width = "30" height = "30" viewBox = "0 0 30 30" role = "img" focusable = "false" > < title > Menu< / title > < path stroke = "currentColor" stroke-linecap = "round" stroke-miterlimit = "10" stroke-width = "2" d = "M4 7h22M4 15h22M4 23h22" / > < / svg > < / button >
< / form >
< nav class = "collapse bd-links" id = "bd-docs-nav" aria-label = "Main navigation" > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/getting-started/introduction/" >
Getting started
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/getting-started/introduction/" >
Introduction
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/download/" >
Download
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/contents/" >
Contents
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/browsers-devices/" >
Browsers & devices
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/javascript/" >
JavaScript
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/theming/" >
Theming
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/build-tools/" >
Build tools
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/webpack/" >
Webpack
< / a >
< / li > < li >
< a href = "/docs/4.5/getting-started/accessibility/" >
Accessibility
< / a >
< / li > < / ul >
< / div > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/layout/overview/" >
Layout
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/layout/overview/" >
Overview
< / a >
< / li > < li >
< a href = "/docs/4.5/layout/grid/" >
Grid
< / a >
< / li > < li >
< a href = "/docs/4.5/layout/utilities-for-layout/" >
Utilities for layout
< / a >
< / li > < / ul >
< / div > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/content/reboot/" >
Content
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/content/reboot/" >
Reboot
< / a >
< / li > < li >
< a href = "/docs/4.5/content/typography/" >
Typography
< / a >
< / li > < li >
< a href = "/docs/4.5/content/code/" >
Code
< / a >
< / li > < li >
< a href = "/docs/4.5/content/images/" >
Images
< / a >
< / li > < li >
< a href = "/docs/4.5/content/tables/" >
Tables
< / a >
< / li > < li >
< a href = "/docs/4.5/content/figures/" >
Figures
< / a >
< / li > < / ul >
< / div > < div class = "bd-toc-item active" >
< a class = "bd-toc-link" href = "/docs/4.5/components/alerts/" >
Components
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/components/alerts/" >
Alerts
< / a >
< / li > < li >
< a href = "/docs/4.5/components/badge/" >
Badge
< / a >
< / li > < li >
< a href = "/docs/4.5/components/breadcrumb/" >
Breadcrumb
< / a >
< / li > < li >
< a href = "/docs/4.5/components/buttons/" >
Buttons
< / a >
< / li > < li >
< a href = "/docs/4.5/components/button-group/" >
Button group
< / a >
< / li > < li >
< a href = "/docs/4.5/components/card/" >
Card
< / a >
< / li > < li >
< a href = "/docs/4.5/components/carousel/" >
Carousel
< / a >
< / li > < li >
< a href = "/docs/4.5/components/collapse/" >
Collapse
< / a >
< / li > < li >
< a href = "/docs/4.5/components/dropdowns/" >
Dropdowns
< / a >
< / li > < li >
< a href = "/docs/4.5/components/forms/" >
Forms
< / a >
< / li > < li class = "active bd-sidenav-active" >
< a href = "/docs/4.5/components/input-group/" >
Input group
< / a >
< / li > < li >
< a href = "/docs/4.5/components/jumbotron/" >
Jumbotron
< / a >
< / li > < li >
< a href = "/docs/4.5/components/list-group/" >
List group
< / a >
< / li > < li >
< a href = "/docs/4.5/components/media-object/" >
Media object
< / a >
< / li > < li >
< a href = "/docs/4.5/components/modal/" >
Modal
< / a >
< / li > < li >
< a href = "/docs/4.5/components/navs/" >
Navs
< / a >
< / li > < li >
< a href = "/docs/4.5/components/navbar/" >
Navbar
< / a >
< / li > < li >
< a href = "/docs/4.5/components/pagination/" >
Pagination
< / a >
< / li > < li >
< a href = "/docs/4.5/components/popovers/" >
Popovers
< / a >
< / li > < li >
< a href = "/docs/4.5/components/progress/" >
Progress
< / a >
< / li > < li >
< a href = "/docs/4.5/components/scrollspy/" >
Scrollspy
< / a >
< / li > < li >
< a href = "/docs/4.5/components/spinners/" >
Spinners
< / a >
< / li > < li >
< a href = "/docs/4.5/components/toasts/" >
Toasts
< / a >
< / li > < li >
< a href = "/docs/4.5/components/tooltips/" >
Tooltips
< / a >
< / li > < / ul >
< / div > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/utilities/borders/" >
Utilities
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/utilities/borders/" >
Borders
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/clearfix/" >
Clearfix
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/close-icon/" >
Close icon
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/colors/" >
Colors
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/display/" >
Display
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/embed/" >
Embed
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/flex/" >
Flex
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/float/" >
Float
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/image-replacement/" >
Image replacement
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/interactions/" >
Interactions
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/overflow/" >
Overflow
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/position/" >
Position
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/screen-readers/" >
Screen readers
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/shadows/" >
Shadows
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/sizing/" >
Sizing
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/spacing/" >
Spacing
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/stretched-link/" >
Stretched link
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/text/" >
Text
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/vertical-align/" >
Vertical align
< / a >
< / li > < li >
< a href = "/docs/4.5/utilities/visibility/" >
Visibility
< / a >
< / li > < / ul >
< / div > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/extend/approach/" >
Extend
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/extend/approach/" >
Approach
< / a >
< / li > < li >
< a href = "/docs/4.5/extend/icons/" >
Icons
< / a >
< / li > < / ul >
< / div > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/migration/" >
Migration
< / a >
< ul class = "nav bd-sidenav" > < / ul >
< / div > < div class = "bd-toc-item" >
< a class = "bd-toc-link" href = "/docs/4.5/about/overview/" >
About
< / a >
< ul class = "nav bd-sidenav" > < li >
< a href = "/docs/4.5/about/overview/" >
Overview
< / a >
< / li > < li >
< a href = "/docs/4.5/about/team/" >
Team
< / a >
< / li > < li >
< a href = "/docs/4.5/about/brand/" >
Brand
< / a >
< / li > < li >
< a href = "/docs/4.5/about/license/" >
License
< / a >
< / li > < li >
< a href = "/docs/4.5/about/translations/" >
Translations
< / a >
< / li > < / ul >
< / div > < / nav >
< / div >
< nav class = "d-none d-xl-block col-xl-2 bd-toc" aria-label = "Secondary navigation" >
< ul class = "section-nav" >
< li class = "toc-entry toc-h2" > < a href = "#basic-example" > Basic example< / a > < / li >
< li class = "toc-entry toc-h2" > < a href = "#wrapping" > Wrapping< / a > < / li >
< li class = "toc-entry toc-h2" > < a href = "#sizing" > Sizing< / a > < / li >
< li class = "toc-entry toc-h2" > < a href = "#checkboxes-and-radios" > Checkboxes and radios< / a > < / li >
< li class = "toc-entry toc-h2" > < a href = "#multiple-inputs" > Multiple inputs< / a > < / li >
< li class = "toc-entry toc-h2" > < a href = "#multiple-addons" > Multiple addons< / a > < / li >
< li class = "toc-entry toc-h2" > < a href = "#button-addons" > Button addons< / a > < / li >
< li class = "toc-entry toc-h2" > < a href = "#buttons-with-dropdowns" > Buttons with dropdowns< / a > < / li >
< li class = "toc-entry toc-h2" > < a href = "#segmented-buttons" > Segmented buttons< / a > < / li >
< li class = "toc-entry toc-h2" > < a href = "#custom-forms" > Custom forms< / a >
< ul >
< li class = "toc-entry toc-h3" > < a href = "#custom-select" > Custom select< / a > < / li >
< li class = "toc-entry toc-h3" > < a href = "#custom-file-input" > Custom file input< / a > < / li >
< / ul >
< / li >
< li class = "toc-entry toc-h2" > < a href = "#accessibility" > Accessibility< / a > < / li >
< / ul >
< / nav >
< main class = "col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role = "main" >
2020-08-04 19:36:55 +03:00
< div class = "d-md-flex flex-md-row-reverse align-items-center justify-content-between" >
2020-10-13 18:59:54 +03:00
< a class = "btn btn-sm btn-bd-light my-2 my-md-0" href = "https://github.com/twbs/bootstrap/blob/v4-dev/site/docs/4.5/components/input-group.md" title = "View and edit this file on GitHub" target = "_blank" rel = "noopener" > View on GitHub< / a >
2020-08-04 19:36:55 +03:00
< h1 class = "bd-title" id = "content" > Input group< / h1 >
< / div >
2020-05-12 20:50:21 +03:00
< p class = "bd-lead" > Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.< / p >
< script async src = "https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id = "_carbonads_js" > < / script >
< h2 id = "basic-example" > Basic example< / h2 >
2020-08-04 19:36:55 +03:00
< p > 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 < code class = "language-plaintext highlighter-rouge" > < label> < / code > s outside the input group.< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< span class = "input-group-text" id = "basic-addon1" > @< / span >
< / div >
< input type = "text" class = "form-control" placeholder = "Username" aria-label = "Username" aria-describedby = "basic-addon1" / >
< / div >
< div class = "input-group mb-3" >
< input type = "text" class = "form-control" placeholder = "Recipient's username" aria-label = "Recipient's username" aria-describedby = "basic-addon2" / >
< div class = "input-group-append" >
< span class = "input-group-text" id = "basic-addon2" > @example.com< / span >
< / div >
< / div >
< label for = "basic-url" > Your vanity URL< / label >
< 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 >
< input type = "text" class = "form-control" id = "basic-url" aria-describedby = "basic-addon3" / >
< / div >
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< span class = "input-group-text" > $< / span >
< / div >
< input type = "text" class = "form-control" aria-label = "Amount (to the nearest dollar)" / >
< div class = "input-group-append" >
< span class = "input-group-text" > .00< / span >
< / div >
< / div >
< 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 >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "na" > id=< / span > < span class = "s" > "basic-addon1"< / span > < span class = "nt" > > < / span > @< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Username"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Username"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "basic-addon1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Recipient's username"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Recipient's username"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "basic-addon2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-append"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "na" > id=< / span > < span class = "s" > "basic-addon2"< / span > < span class = "nt" > > < / span > @example.com< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < label< / span > < span class = "na" > for=< / span > < span class = "s" > "basic-url"< / span > < span class = "nt" > > < / span > Your vanity URL< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "na" > id=< / span > < span class = "s" > "basic-addon3"< / span > < span class = "nt" > > < / span > https://example.com/users/< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > id=< / span > < span class = "s" > "basic-url"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "basic-addon3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span > $< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Amount (to the nearest dollar)"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-append"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span > .00< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span > With textarea< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < textarea< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "With textarea"< / span > < span class = "nt" > > < /textarea> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h2 id = "wrapping" > Wrapping< / h2 >
2020-08-04 19:36:55 +03:00
< p > Input groups wrap by default via < code class = "language-plaintext highlighter-rouge" > flex-wrap: wrap< / code > in order to accommodate custom form field validation within an input group. You may disable this with < code class = "language-plaintext highlighter-rouge" > .flex-nowrap< / code > .< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-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 >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group flex-nowrap"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "na" > id=< / span > < span class = "s" > "addon-wrapping"< / span > < span class = "nt" > > < / span > @< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Username"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Username"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "addon-wrapping"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h2 id = "sizing" > Sizing< / h2 >
2020-08-04 19:36:55 +03:00
< p > Add the relative form sizing classes to the < code class = "language-plaintext highlighter-rouge" > .input-group< / code > itself and contents within will automatically resize—no need for repeating the form control size classes on each element.< / p >
2020-05-12 20:50:21 +03:00
< p > < strong > Sizing on the individual input group elements isn’ < / strong > < / p >
< div class = "bd-example" >
< 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 >
< input type = "text" class = "form-control" aria-label = "Sizing example input" aria-describedby = "inputGroup-sizing-sm" / >
< / div >
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< span class = "input-group-text" id = "inputGroup-sizing-default" > Default< / span >
< / div >
< input type = "text" class = "form-control" aria-label = "Sizing example input" aria-describedby = "inputGroup-sizing-default" / >
< / div >
< div class = "input-group input-group-lg" >
< div class = "input-group-prepend" >
< span class = "input-group-text" id = "inputGroup-sizing-lg" > Large< / span >
< / div >
< input type = "text" class = "form-control" aria-label = "Sizing example input" aria-describedby = "inputGroup-sizing-lg" / >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group input-group-sm mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroup-sizing-sm"< / span > < span class = "nt" > > < / span > Small< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Sizing example input"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "inputGroup-sizing-sm"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroup-sizing-default"< / span > < span class = "nt" > > < / span > Default< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Sizing example input"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "inputGroup-sizing-default"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group input-group-lg"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroup-sizing-lg"< / span > < span class = "nt" > > < / span > Large< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Sizing example input"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "inputGroup-sizing-lg"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h2 id = "checkboxes-and-radios" > Checkboxes and radios< / h2 >
< p > Place any checkbox or radio option within an input group’ < / p >
< div class = "bd-example" >
< 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" / >
< / div >
< / div >
< 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" >
< input type = "radio" aria-label = "Radio button for following text input" / >
< / div >
< / div >
< input type = "text" class = "form-control" aria-label = "Text input with radio button" / >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Checkbox for following text input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Text input with checkbox"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Radio button for following text input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Text input with radio button"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h2 id = "multiple-inputs" > Multiple inputs< / h2 >
2020-08-04 19:36:55 +03:00
< p > While multiple < code class = "language-plaintext highlighter-rouge" > < input> < / code > s are supported visually, validation styles are only available for input groups with a single < code class = "language-plaintext highlighter-rouge" > < input> < / code > .< / p >
2020-05-12 20:50:21 +03:00
< div class = "bd-example" >
< div class = "input-group" >
< div class = "input-group-prepend" >
< span class = "input-group-text" > First and last name< / span >
< / div >
< input type = "text" aria-label = "First name" class = "form-control" / >
< input type = "text" aria-label = "Last name" class = "form-control" / >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span > First and last name< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "First name"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Last name"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h2 id = "multiple-addons" > Multiple addons< / h2 >
< p > Multiple add-ons are supported and can be mixed with checkbox and radio input versions.< / p >
< div class = "bd-example" >
< 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 >
< / div >
< input type = "text" class = "form-control" aria-label = "Dollar amount (with dot and two decimal places)" / >
< / div >
< div class = "input-group" >
< input type = "text" class = "form-control" aria-label = "Dollar amount (with dot and two decimal places)" / >
< div class = "input-group-append" >
< span class = "input-group-text" > $< / span >
< span class = "input-group-text" > 0.00< / span >
< / div >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span > $< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span > 0.00< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Dollar amount (with dot and two decimal places)"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Dollar amount (with dot and two decimal places)"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-append"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span > $< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "nt" > > < / span > 0.00< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h2 id = "button-addons" > Button addons< / h2 >
< div class = "bd-example" >
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< button class = "btn btn-outline-secondary" type = "button" id = "button-addon1" > Button< / button >
< / div >
< input type = "text" class = "form-control" placeholder = "" aria-label = "Example text with button addon" aria-describedby = "button-addon1" / >
< / div >
< div class = "input-group mb-3" >
< input type = "text" class = "form-control" placeholder = "Recipient's username" aria-label = "Recipient's username" aria-describedby = "button-addon2" / >
< div class = "input-group-append" >
< button class = "btn btn-outline-secondary" type = "button" id = "button-addon2" > Button< / button >
< / div >
< / div >
< div class = "input-group mb-3" >
< div class = "input-group-prepend" id = "button-addon3" >
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< / div >
< input type = "text" class = "form-control" placeholder = "" aria-label = "Example text with two button addons" aria-describedby = "button-addon3" / >
< / div >
< div class = "input-group" >
< 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" >
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< / div >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > id=< / span > < span class = "s" > "button-addon1"< / span > < span class = "nt" > > < / span > Button< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > ""< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Example text with button addon"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "button-addon1"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Recipient's username"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Recipient's username"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "button-addon2"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-append"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > id=< / span > < span class = "s" > "button-addon2"< / span > < span class = "nt" > > < / span > Button< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "na" > id=< / span > < span class = "s" > "button-addon3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Button< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Button< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > ""< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Example text with two button addons"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "button-addon3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Recipient's username"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Recipient's username with two button addons"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "button-addon4"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-append"< / span > < span class = "na" > id=< / span > < span class = "s" > "button-addon4"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Button< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Button< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h2 id = "buttons-with-dropdowns" > Buttons with dropdowns< / h2 >
< div class = "bd-example" >
< 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 >
< / div >
< / div >
< 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 >
< / div >
< / div >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary dropdown-toggle"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "dropdown"< / span > < span class = "na" > aria-haspopup=< / span > < span class = "s" > "true"< / span > < span class = "na" > aria-expanded=< / span > < span class = "s" > "false"< / span > < span class = "nt" > > < / span > Dropdown< span class = "nt" > < /button> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-menu"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Action< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Another action< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Something else here< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > role=< / span > < span class = "s" > "separator"< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-divider"< / span > < span class = "nt" > > < /div> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Separated link< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Text input with dropdown button"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Text input with dropdown button"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-append"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary dropdown-toggle"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "dropdown"< / span > < span class = "na" > aria-haspopup=< / span > < span class = "s" > "true"< / span > < span class = "na" > aria-expanded=< / span > < span class = "s" > "false"< / span > < span class = "nt" > > < / span > Dropdown< span class = "nt" > < /button> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-menu"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Action< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Another action< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Something else here< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > role=< / span > < span class = "s" > "separator"< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-divider"< / span > < span class = "nt" > > < /div> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Separated link< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h2 id = "segmented-buttons" > Segmented buttons< / h2 >
< div class = "bd-example" >
< 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 >
< / div >
< / div >
< 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 >
< / div >
< / div >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary"< / span > < span class = "nt" > > < / span > Action< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "dropdown"< / span > < span class = "na" > aria-haspopup=< / span > < span class = "s" > "true"< / span > < span class = "na" > aria-expanded=< / span > < span class = "s" > "false"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "nt" > > < / span > Toggle Dropdown< span class = "nt" > < /span> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-menu"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Action< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Another action< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Something else here< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > role=< / span > < span class = "s" > "separator"< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-divider"< / span > < span class = "nt" > > < /div> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Separated link< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Text input with segmented dropdown button"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > class=< / span > < span class = "s" > "form-control"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Text input with segmented dropdown button"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-append"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary"< / span > < span class = "nt" > > < / span > Action< span class = "nt" > < /button> < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"< / span > < span class = "na" > data-toggle=< / span > < span class = "s" > "dropdown"< / span > < span class = "na" > aria-haspopup=< / span > < span class = "s" > "true"< / span > < span class = "na" > aria-expanded=< / span > < span class = "s" > "false"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "sr-only"< / span > < span class = "nt" > > < / span > Toggle Dropdown< span class = "nt" > < /span> < / span >
< span class = "nt" > < /button> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-menu"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Action< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Another action< span class = "nt" > < /a> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Something else here< span class = "nt" > < /a> < / span >
< span class = "nt" > < div< / span > < span class = "na" > role=< / span > < span class = "s" > "separator"< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-divider"< / span > < span class = "nt" > > < /div> < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "dropdown-item"< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > Separated link< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h2 id = "custom-forms" > Custom forms< / h2 >
< p > Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.< / p >
< h3 id = "custom-select" > Custom select< / h3 >
< div class = "bd-example" >
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< label class = "input-group-text" for = "inputGroupSelect01" > Options< / label >
< / div >
< select class = "custom-select" id = "inputGroupSelect01" >
< 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" >
< select class = "custom-select" id = "inputGroupSelect02" >
< option selected = "" > Choose...< / option >
< option value = "1" > One< / option >
< option value = "2" > Two< / option >
< option value = "3" > Three< / option >
< / select >
< div class = "input-group-append" >
< label class = "input-group-text" for = "inputGroupSelect02" > Options< / label >
< / div >
< / div >
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< / div >
< select class = "custom-select" id = "inputGroupSelect03" aria-label = "Example select with button addon" >
< 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" >
< select class = "custom-select" id = "inputGroupSelect04" aria-label = "Example select with button addon" >
< option selected = "" > Choose...< / option >
< option value = "1" > One< / option >
< option value = "2" > Two< / option >
< option value = "3" > Three< / option >
< / select >
< div class = "input-group-append" >
< button class = "btn btn-outline-secondary" type = "button" > Button< / button >
< / div >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "na" > for=< / span > < span class = "s" > "inputGroupSelect01"< / span > < span class = "nt" > > < / span > Options< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroupSelect01"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "nt" > > < / span > Choose...< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "1"< / span > < span class = "nt" > > < / span > One< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "2"< / span > < span class = "nt" > > < / span > Two< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span > Three< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroupSelect02"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "nt" > > < / span > Choose...< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "1"< / span > < span class = "nt" > > < / span > One< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "2"< / span > < span class = "nt" > > < / span > Two< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span > Three< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-append"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "na" > for=< / span > < span class = "s" > "inputGroupSelect02"< / span > < span class = "nt" > > < / span > Options< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Button< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroupSelect03"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Example select with button addon"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "nt" > > < / span > Choose...< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "1"< / span > < span class = "nt" > > < / span > One< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "2"< / span > < span class = "nt" > > < / span > Two< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span > Three< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < select< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-select"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroupSelect04"< / span > < span class = "na" > aria-label=< / span > < span class = "s" > "Example select with button addon"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "nt" > > < / span > Choose...< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "1"< / span > < span class = "nt" > > < / span > One< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "2"< / span > < span class = "nt" > > < / span > Two< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "3"< / span > < span class = "nt" > > < / span > Three< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-append"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span > Button< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h3 id = "custom-file-input" > Custom file input< / h3 >
< div class = "bd-example" >
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< span class = "input-group-text" id = "inputGroupFileAddon01" > Upload< / span >
< / div >
< div class = "custom-file" >
< input type = "file" class = "custom-file-input" id = "inputGroupFile01" aria-describedby = "inputGroupFileAddon01" / >
< label class = "custom-file-label" for = "inputGroupFile01" > Choose file< / label >
< / div >
< / div >
< div class = "input-group mb-3" >
< div class = "custom-file" >
< input type = "file" class = "custom-file-input" id = "inputGroupFile02" / >
< label class = "custom-file-label" for = "inputGroupFile02" aria-describedby = "inputGroupFileAddon02" > Choose file< / label >
< / div >
< div class = "input-group-append" >
< span class = "input-group-text" id = "inputGroupFileAddon02" > Upload< / span >
< / div >
< / div >
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< button class = "btn btn-outline-secondary" type = "button" id = "inputGroupFileAddon03" > Button< / button >
< / div >
< div class = "custom-file" >
< input type = "file" class = "custom-file-input" id = "inputGroupFile03" aria-describedby = "inputGroupFileAddon03" / >
< label class = "custom-file-label" for = "inputGroupFile03" > Choose file< / label >
< / div >
< / div >
< div class = "input-group" >
< div class = "custom-file" >
< input type = "file" class = "custom-file-input" id = "inputGroupFile04" aria-describedby = "inputGroupFileAddon04" / >
< label class = "custom-file-label" for = "inputGroupFile04" > Choose file< / label >
< / div >
< div class = "input-group-append" >
< button class = "btn btn-outline-secondary" type = "button" id = "inputGroupFileAddon04" > Button< / button >
< / div >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroupFileAddon01"< / span > < span class = "nt" > > < / span > Upload< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "file"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroupFile01"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "inputGroupFileAddon01"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "inputGroupFile01"< / span > < span class = "nt" > > < / span > Choose file< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "file"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroupFile02"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "inputGroupFile02"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "inputGroupFileAddon02"< / span > < span class = "nt" > > < / span > Choose file< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-append"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-text"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroupFileAddon02"< / span > < span class = "nt" > > < / span > Upload< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group mb-3"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-prepend"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroupFileAddon03"< / span > < span class = "nt" > > < / span > Button< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "file"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroupFile03"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "inputGroupFileAddon03"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "inputGroupFile03"< / span > < span class = "nt" > > < / span > Choose file< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "file"< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-input"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroupFile04"< / span > < span class = "na" > aria-describedby=< / span > < span class = "s" > "inputGroupFileAddon04"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "custom-file-label"< / span > < span class = "na" > for=< / span > < span class = "s" > "inputGroupFile04"< / span > < span class = "nt" > > < / span > Choose file< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "input-group-append"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "btn btn-outline-secondary"< / span > < span class = "na" > type=< / span > < span class = "s" > "button"< / span > < span class = "na" > id=< / span > < span class = "s" > "inputGroupFileAddon04"< / span > < span class = "nt" > > < / span > Button< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< h2 id = "accessibility" > Accessibility< / h2 >
2020-08-04 19:36:55 +03:00
< p > Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a < code class = "language-plaintext highlighter-rouge" > < label> < / code > element, or—in the case of buttons—to include sufficiently descriptive text as part of the < code class = "language-plaintext highlighter-rouge" > < button> ...< /button> < / code > content.< / p >
< p > For situations where it’ < code class = "language-plaintext highlighter-rouge" > < label> < / code > or appropriate text content, there are alternative ways of still providing an accessible name, such as:< / p >
< ul >
< li > < code class = "language-plaintext highlighter-rouge" > < label> < / code > elements hidden using the < code class = "language-plaintext highlighter-rouge" > .visually-hidden< / code > class< / li >
< li > Pointing to an existing element that can act as a label using < code class = "language-plaintext highlighter-rouge" > aria-labelledby< / code > < / li >
< li > Providing a < code class = "language-plaintext highlighter-rouge" > title< / code > attribute< / li >
< li > Explicitly setting the accessible name on an element using < code class = "language-plaintext highlighter-rouge" > aria-label< / code > < / li >
< / ul >
< p > If none of these are present, assistive technologies may resort to using the < code class = "language-plaintext highlighter-rouge" > placeholder< / code > attribute as a fallback for the accessible name on < code class = "language-plaintext highlighter-rouge" > < input> < / code > and < code class = "language-plaintext highlighter-rouge" > < textarea> < / code > elements. The examples in this section provide a few suggested, case-specific approaches.< / p >
2020-05-12 20:50:21 +03:00
2020-08-04 19:36:55 +03:00
< p > While using visually hidden content (< code class = "language-plaintext highlighter-rouge" > .sr-only< / code > , < code class = "language-plaintext highlighter-rouge" > aria-label< / code > , and even < code class = "language-plaintext highlighter-rouge" > placeholder< / code > content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.< / p >
2020-05-12 20:50:21 +03:00
< / main >
< / div >
< / div >
< script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" > < / script >
2020-10-13 18:59:54 +03:00
< script > window . jQuery || document . write ( '<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>' ) < / script > < script src = "/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin = "anonymous" > < / script > < script src = "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" > < / script > < script src = "/docs/4.5/assets/js/docs.min.js" > < / script >
2020-05-12 20:50:21 +03:00
< / body >
< / html >
