text: (window.webpackJsonp=window.webpackJsonp||[]).push([[1968],{"013z":function(e,t,a){"use strict";var n=a("q1tI"),o=a.n(n),i=a("NmYn"),s=a.n(i),l=a("Wbzz"),c=a("Xrax"),b=a("a7k6"),d=a("TSYQ"),r=a.n(d),p=a("QH2O"),g=a("qKvR");var m=({title:e,tabs:t=[]})=>Object(g.b)("div",{className:r()(p.pageHeader,{[p.withTabs]:t.length})},Object(g.b)("div",{className:"bx--grid"},Object(g.b)("div",{className:"bx--row"},Object(g.b)("div",{className:"bx--col-lg-12"},Object(g.b)("h1",{id:"page-title",className:p.text},e))))),A=a("BAC9");var u=({relativePagePath:e,repository:t})=>{const{site:{siteMetadata:{repository:a}}}=Object(l.useStaticQuery)("1364590287"),{baseUrl:n,subDirectory:o,branch:i}=t||a,s=`${n}/edit/${i}${o}/src/pages${e}`;return n?Object(g.b)("div",{className:"bx--row "+A.row},Object(g.b)("div",{className:"bx--col"},Object(g.b)("a",{className:A.link,href:s},"Edit this page on GitHub"))):null},h=a("FCXl"),f=a("I8xM");class w extends o.a.Component{render(){const{tabs:e,slug:t}=this.props,a=t.split("/").filter(Boolean).slice(-1)[0],n=e.map(e=>{const n=s()(e,{lower:!0,strict:!0}),o=n===a,i=new RegExp(a+"/?(#.*)?$"),c=t.replace(i,n);return Object(g.b)("li",{key:e,className:r()({[f.selectedItem]:o},f.listItem)},Object(g.b)(l.Link,{className:f.link,to:""+c},e))});return Object(g.b)("div",{className:f.tabsContainer},Object(g.b)("div",{className:"bx--grid"},Object(g.b)("div",{className:"bx--row"},Object(g.b)("div",{className:"bx--col-lg-12 bx--col-no-gutter"},Object(g.b)("nav",null,Object(g.b)("ul",{className:f.list},n))))))}}var y=w,O=a("MjG9");t.a=({pageContext:e,children:t,location:a,Title:n})=>{const{frontmatter:o={},relativePagePath:i,titleType:d}=e,{tabs:r,title:p,theme:A,description:f,keywords:w}=o,{site:{pathPrefix:j}}=Object(l.useStaticQuery)("2456312558"),x=j?a.pathname.replace(j,""):a.pathname,N=r?x.split("/").filter(Boolean).slice(-1)[0]||s()(r[0],{lower:!0}):"";return Object(g.b)(b.a,{tabs:r,homepage:!1,theme:A,pageTitle:p,pageDescription:f,pageKeywords:w,titleType:d},Object(g.b)(m,{title:n?Object(g.b)(n,null):p,label:"label",tabs:r}),r&&Object(g.b)(y,{slug:x,tabs:r,currentTab:N}),Object(g.b)(O.a,{padded:!0},t,Object(g.b)(u,{relativePagePath:i})),Object(g.b)(h.a,{pageContext:e,location:a,slug:x,tabs:r,currentTab:N}),Object(g.b)(c.a,null))}},BAC9:function(e,t,a){e.exports={bxTextTruncateEnd:"EditLink-module--bx--text-truncate--end--2pqje",bxTextTruncateFront:"EditLink-module--bx--text-truncate--front--3_lIE",link:"EditLink-module--link--1qzW3",row:"EditLink-module--row--1B9Gk"}},I8xM:function(e,t,a){e.exports={bxTextTruncateEnd:"PageTabs-module--bx--text-truncate--end--267NA",bxTextTruncateFront:"PageTabs-module--bx--text-truncate--front--3xEQF",tabsContainer:"PageTabs-module--tabs-container--8N4k0",list:"PageTabs-module--list--3eFQc",listItem:"PageTabs-module--list-item--nUmtD",link:"PageTabs-module--link--1mDJ1",selectedItem:"PageTabs-module--selected-item--YPVr3"}},QH2O:function(e,t,a){e.exports={bxTextTruncateEnd:"PageHeader-module--bx--text-truncate--end--mZWeX",bxTextTruncateFront:"PageHeader-module--bx--text-truncate--front--3zvrI",pageHeader:"PageHeader-module--page-header--3hIan",withTabs:"PageHeader-module--with-tabs--3nKxA",text:"PageHeader-module--text--o9LFq"}},qdvE:function(e,t,a){"use strict";a.r(t),a.d(t,"_frontmatter",(function(){return c})),a.d(t,"default",(function(){return O}));a("3bBZ"),a("q1tI");var n=a("7ljp"),o=a("013z"),i=a("pWgh");a("qKvR");function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var a,n,o=function(e,t){if(null==e)return{};var a,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(o[a]=e[a]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(o[a]=e[a])}return o}const c={},b=e=>function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),Object(n.b)("div",t)},d=b("PageDescription"),r=b("AnchorLinks"),p=b("AnchorLink"),g=b("ComponentDemo"),m=b("ComponentVariant"),A=b("Row"),u=b("Column"),h=b("DoDontRow"),f=b("DoDont"),w={_frontmatter:c},y=o.a;function O(e){let{components:t}=e,a=l(e,["components"]);return Object(n.b)(y,s({},w,a,{components:t,mdxType:"MDXLayout"}),Object(n.b)(d,{mdxType:"PageDescription"},Object(n.b)("p",null,"Dropdowns present a list of options from which a user can select one option, or\nseveral. A selected option can represent a value in a form, or can be used as an\naction to filter or sort existing content.")),Object(n.b)(r,{mdxType:"AnchorLinks"},Object(n.b)(p,{mdxType:"AnchorLink"},"Overview"),Object(n.b)(p,{mdxType:"AnchorLink"},"Live demo"),Object(n.b)(p,{mdxType:"AnchorLink"},"Formatting"),Object(n.b)(p,{mdxType:"AnchorLink"},"Content"),Object(n.b)(p,{mdxType:"AnchorLink"},"Universal behaviors"),Object(n.b)(p,{mdxType:"AnchorLink"},"Dropdown"),Object(n.b)(p,{mdxType:"AnchorLink"},"Multiselect"),Object(n.b)(p,{mdxType:"AnchorLink"},"Combo box"),Object(n.b)(p,{mdxType:"AnchorLink"},"Modifiers"),Object(n.b)(p,{mdxType:"AnchorLink"},"Related"),Object(n.b)(p,{mdxType:"AnchorLink"},"References"),Object(n.b)(p,{mdxType:"AnchorLink"},"Feedback")),Object(n.b)("h2",null,"Overview"),Object(n.b)("p",null,"There are three different types of dropdowns that support various kinds of\nfunctionality—dropdown, multiselect, and combo box."),Object(n.b)("h3",null,"Types"),Object(n.b)("table",null,Object(n.b)("thead",{parentName:"table"},Object(n.b)("tr",{parentName:"thead"},Object(n.b)("th",s({parentName:"tr"},{align:null}),"Type"),Object(n.b)("th",s({parentName:"tr"},{align:null}),"Purpose"))),Object(n.b)("tbody",{parentName:"table"},Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",s({parentName:"tr"},{align:null}),Object(n.b)("a",s({parentName:"td"},{href:"#dropdown"}),"Dropdown")),Object(n.b)("td",s({parentName:"tr"},{align:null}),"Allows the user to select one option from a list.")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",s({parentName:"tr"},{align:null}),Object(n.b)("a",s({parentName:"td"},{href:"#multiselect"}),"Multiselect")),Object(n.b)("td",s({parentName:"tr"},{align:null}),"Allows the user to select multiple options from a list and filter.")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",s({parentName:"tr"},{align:null}),Object(n.b)("a",s({parentName:"td"},{href:"#combo-box"}),"Combo box")),Object(n.b)("td",s({parentName:"tr"},{align:null}),"Allows a user to enter any value, or select a value from a list of suggested, likely, or desired values.")))),Object(n.b)("h4",null,"When to use"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Dropdowns can be used in forms on full pages, in modals, or on side panels.\nThe dropdown component is used to filter or sort contents on a page. It is a\nstylized version of the select component, and can be styled as needed.")),Object(n.b)("h4",null,"When not to use"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"It is best practice not to use a dropdown if there are two options to choose\nfrom. In this case, use a\n",Object(n.b)("a",s({parentName:"li"},{href:"https://www.carbondesignsystem.com/components/radio-button/code"}),"radio button"),"\ngroup instead."),Object(n.b)("li",{parentName:"ul"},"Do not nest dropdowns or use them to display overly complex information. Keep\noption selections as straight forward as possible."),Object(n.b)("li",{parentName:"ul"},"Consider using a\n",Object(n.b)("a",s({parentName:"li"},{href:"https://www.carbondesignsystem.com/components/select/usage"}),"select dropdown"),"\nif most of your experience is form-based or frequently used on mobile\nplatforms. The native select works more easily with a native form when\nsubmitting data and is also easier to use on a mobile platform.")),Object(n.b)("h2",null,"Live demo"),Object(n.b)(g,{components:[{id:"default-dropdown",label:"Default"},{id:"combo-box",label:"Combo box"},{id:"multiselect",label:"Multiselect"},{id:"filter-multiselect",label:"Filterable multiselect"}],scope:{items:i.a},mdxType:"ComponentDemo"},Object(n.b)(m,{id:"default-dropdown",knobs:{Dropdown:["light","disabled"]},links:{React:"https://react.carbondesignsystem.com/?path=/story/dropdown--default",Angular:"https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic",Vue:"http://vue.carbondesignsystem.com/?path=/story/components-cvdropdown--default",Vanilla:"https://the-carbon-components.netlify.com/?nav=dropdown"},mdxType:"ComponentVariant"},'\n    <Dropdown\n      ariaLabel="Dropdown"\n      id="carbon-dropdown-example"\n      items={items}\n      label="Dropdown menu options"\n      titleText="Dropdown title"\n    />\n  '),Object(n.b)(m,{id:"combo-box",knobs:{ComboBox:["light","disabled"]},links:{React:"https://react.carbondesignsystem.com/?path=/story/combobox--default",Angular:"https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic",Vue:"http://vue.carbondesignsystem.com/?path=/story/components-cvcombobox--default",Vanilla:"https://the-carbon-components.netlify.com/?nav=dropdown"},mdxType:"ComponentVariant"},'\n    <ComboBox\n      ariaLabel="ComboBox"\n      id="carbon-combobox-example"\n      items={items}\n      label="Combo box menu options"\n      titleText="Combo box title"\n    />\n  '),Object(n.b)(m,{id:"multiselect",knobs:{MultiSelect:["light","disabled"]},links:{React:"https://react.carbondesignsystem.com/?path=/story/multiselect--default",Angular:"https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic",Vue:"http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--default",Vanilla:"https://the-carbon-components.netlify.com/?nav=dropdown"},mdxType:"ComponentVariant"},'\n    <MultiSelect\n      ariaLabel="MultiSelect"\n      id="carbon-multiselect-example"\n      items={items}\n      label="Multiselect menu options"\n      titleText="Multiselect title"\n    />\n  '),Object(n.b)(m,{id:"filter-multiselect",links:{React:"https://react.carbondesignsystem.com/?path=/story/multiselect--filterable",Angular:"https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic",Vue:"http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--user-filter-and-or-highlight",Vanilla:"https://the-carbon-components.netlify.com/?nav=dropdown"},mdxType:"ComponentVariant"},'\n    <MultiSelect.Filterable\n      ariaLabel="Filterable MultiSelect"\n      id="carbon--filterable-multiselect-example"\n      items={items}\n      label="Filterable multiselect options"\n      titleText="Filterable multiselect title"\n    />\n ')),Object(n.b)("h2",null,"Formatting"),Object(n.b)("h3",null,"Anatomy"),Object(n.b)("p",null,"Dropdowns are composed of four distinct sections—assistive text like labels or\nhelper text, a field, a menu, and options contained within the menu. Labels and\nhelper text are optional but can guide the user to make an informed decision\nwhen making a selection."),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"56.25%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAB4ElEQVQoz2NgAIJr9o0MMPD//39GIGYC4c+fP7OA8JcvX+AYxv/06ROIzQjSA6QZgGIQA645NoEFr5hXm103q5FjIBF8+viJEUXgql0DE9hAq9rUc4xRqs8ePrZ98PDBnIcPH04EuqIHaDMI96LhLqDc1C/fvppBXcj4/f8fiIE3fDrBNlz3aLPbxsAs+OHpy1Kgd/8DNfwnBD68elsA0vvu6gMWlKC7GdADd/GbN2/SP3z48P/jx48/gC75BbQdG/7+79+//y+v3SuC6bvm0oLibTj73fv3GUAN/9+9e/fn27dv/4CG/v/69SsKBor9Brnw9Y0HJSA9t8IniIANdWoCGmZdB4kUh0aLvQwMXPdv3M59/vz5/3v37v1+9uzZXxz4FyhI7l24ln+CwUbqqk19NNhhILNgYXjNvdXpJIOS8N3LNwqfPnv2/8aNG/9BBr98+RIDAw38/wXo0runL5eCIwWY1O6XLEJ4+YZ3ByIM375JBBr0ExiWr4Fefwt0CTb8Cij358W1ezkgPd/+/WJazejN8PfXb6D/Q/vBBl0J7wUnnxMnTvAcP35c/vix47KnT5+WPXPmDJjGguWP79jPC9JzfukOiBlm1QwMF9UL4a47f/Ycqema4dKNqyh8AGSnxBKrHs5bAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Dropdown anatomy",title:"Dropdown anatomy",src:"/static/57cf32a06b1128d3c53ea0cca8daf610/3cbba/dropdown-usage-1.png",srcSet:["/static/57cf32a06b1128d3c53ea0cca8daf610/7fc1e/dropdown-usage-1.png 288w","/static/57cf32a06b1128d3c53ea0cca8daf610/a5df1/dropdown-usage-1.png 576w","/static/57cf32a06b1128d3c53ea0cca8daf610/3cbba/dropdown-usage-1.png 1152w","/static/57cf32a06b1128d3c53ea0cca8daf610/92c65/dropdown-usage-1.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("ol",null,Object(n.b)("li",{parentName:"ol"},Object(n.b)("strong",{parentName:"li"},"Labels and helper text (optional):")," Assistive text to help the user make a\nselection."),Object(n.b)("li",{parentName:"ol"},Object(n.b)("strong",{parentName:"li"},"Field:")," Persists when the dropdown is open or closed."),Object(n.b)("li",{parentName:"ol"},Object(n.b)("strong",{parentName:"li"},"Option:")," A list of multiple options to select from within a menu."),Object(n.b)("li",{parentName:"ol"},Object(n.b)("strong",{parentName:"li"},"Menu:")," Displayed as an open state and contains a list of options to select\nfrom.")),Object(n.b)("h3",null,"Sizing"),Object(n.b)("h4",null,"Height"),Object(n.b)("p",null,"There are three dropdown height sizes: Large, medium (default), and small. Use a\nconsistent dropdown height when it is being used alongside other form components\non the same page. Supporting three different dropdown sizes gives you more\nflexibility when structuring layouts. When in doubt, use the default medium size\nheight."),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"84.375%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsSAAALEgHS3X78AAABxElEQVQ4y62UyU4CQRCG2cImvABHfYMhLq/g1Sfw6nIx8W648wjq1QOeNfHKyScgIYR939cRxpDxqxYIZCYoxk6+dFfNdHVV/T3jcKyN+Xzu2HWYprn9wXQ69bAOgL/T6QQGg4GFXq/nn81mAfAu9+LfDNjv9z0yD4fD2Hg8NrH1yWTyydqOqWEYJu8+y55ms+nE9x0on88r2u22W+xut3tWqVQS2Pdk8ohtAf8D8xNcy55areasVqsqzu/6scsgqm9JNpv1cVoQQpShaLVaIbK1IP5GoxHM5XK+9RgS0CUQzEmprl0TKhaLLoIqJI6lXJobGY1Gx7qua8watoY4dhzCvl3JChrsWagdA7NUKumcatBsg8AGiq7A/uB6yU1IyJ56ve6kDZuiiEMGZUcymcxJOp3WIEorogSN4l8hdrlcPoIDuwxV7dKDQqHg/oOo7o0eriuE08upQQKHKTlENgoysiPMu3sWlf/9HnKCgtuvJBeFuYe32BeoeIXKFvBfIs4NnC6+FId8KRJnNbjEqn/8EM4R5R3lXlDxjcAW8L8iYhLuZA/tkYSs2XLyzhWmUqntvy+Z4/G4ukay/gkZyWRytf4CIYpd/2e/9JIAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Dropdown sizes",title:"Dropdown sizes",src:"/static/a3c76db5ab4a47408235e836c6250b4f/3cbba/dropdown-usage-2.png",srcSet:["/static/a3c76db5ab4a47408235e836c6250b4f/7fc1e/dropdown-usage-2.png 288w","/static/a3c76db5ab4a47408235e836c6250b4f/a5df1/dropdown-usage-2.png 576w","/static/a3c76db5ab4a47408235e836c6250b4f/3cbba/dropdown-usage-2.png 1152w","/static/a3c76db5ab4a47408235e836c6250b4f/92c65/dropdown-usage-2.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("table",null,Object(n.b)("thead",{parentName:"table"},Object(n.b)("tr",{parentName:"thead"},Object(n.b)("th",s({parentName:"tr"},{align:null}),"Dropdown size"),Object(n.b)("th",s({parentName:"tr"},{align:null}),"Height (px/rem)"),Object(n.b)("th",s({parentName:"tr"},{align:null}),"Use case"))),Object(n.b)("tbody",{parentName:"table"},Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",s({parentName:"tr"},{align:null}),"Large"),Object(n.b)("td",s({parentName:"tr"},{align:null}),"48/3"),Object(n.b)("td",s({parentName:"tr"},{align:null}),"Choose this size when there is a lot of space to work with. This size is typically used in simple forms or when a dropdown is placed by itself on a page, for example as a filter.")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",s({parentName:"tr"},{align:null}),"Medium (default)"),Object(n.b)("td",s({parentName:"tr"},{align:null}),"40/2.5"),Object(n.b)("td",s({parentName:"tr"},{align:null}),"This is our default size and should be used whenever possible.")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",s({parentName:"tr"},{align:null}),"Small"),Object(n.b)("td",s({parentName:"tr"},{align:null}),"32/2"),Object(n.b)("td",s({parentName:"tr"},{align:null}),"Use when space is constricted or when placing a dropdown in a form that is long and complex.")))),Object(n.b)("p",null,"When the menu is open, each option in the menu should be the same height as the\nfield. Use a consistent size of form components on the same page. For example,\nif you are using a medium size dropdown also use the same size text inputs,\nbuttons, and so on."),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"56.25%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABiUlEQVQoz51QPU/CUBStlpho+AuE0c3V2X9iTJSQqBHj6uDgQnBwcDEOTsbBH8AvgBAaqsRg21SkA+WjCPLVyod9nlstUMBovMnJea+957xzL/ewGuGo2En8ixkjLBLa7baP0Ol0RnDvrVaLzgukAXP4xo3KNf1PuaYzZsrxjY+4+PS8UdC0K03TzpEihpcJZ1OI4t8FeN01NU3Ta6geXq8Qv+nVI4zLIGC/VbPZ3P025Ov1+jjlPUxN7IzOtVot1Gg0qPkdCfpongfLtm2G3m3SdLtdXlGUScMDDnl4OuOlMAQMPMQYNkwZBNMYUEL0hEhjWRavqqp3ZDl6t0T8klP2S6USy+fzA13XP35An1ZSKBR2SFMul3lRFL2Gub3LZeL8oxQp6jqTJImRcaVSmQEMnaR4NEwa9PGZTMa7w954h1to6IENjP6KJPNQBYaGYWySBmvhZVn2JhRitw6nUil/MpkMAoF0Oh0QBMHhOQgmEgk/aShdPB4fJzTXTh0WJ2P/sbLZrOf+CYWvzonO5aorAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Dropdown field and option size relationship",title:"Dropdown field and option size relationship",src:"/static/3148653b170bfd4ee3862a2aa5e60dc5/3cbba/dropdown-usage-3.png",srcSet:["/static/3148653b170bfd4ee3862a2aa5e60dc5/7fc1e/dropdown-usage-3.png 288w","/static/3148653b170bfd4ee3862a2aa5e60dc5/a5df1/dropdown-usage-3.png 576w","/static/3148653b170bfd4ee3862a2aa5e60dc5/3cbba/dropdown-usage-3.png 1152w","/static/3148653b170bfd4ee3862a2aa5e60dc5/92c65/dropdown-usage-3.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h4",null,"Width"),Object(n.b)("p",null,"There is no minimum or maximum width for a dropdown. The width can be customized\nappropriately for its context."),Object(n.b)("h3",null,"Placement"),Object(n.b)("p",null,"Field containers should vertically align to the grid and with other form\ncomponents on a page."),Object(n.b)(h,{mdxType:"DoDontRow"},Object(n.b)(f,{caption:"Do align field containers to the grid.",mdxType:"DoDont"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"576px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"100%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAACu0lEQVQ4y61T61LaQBjlCcC+fNuZqihWp69BO2OdqqhIQAQCuUDIPdlsEu6n3y5eoLR/rJn5Zk92NyfnnP22sFqtIB4xvkcVNgmXy+V/V+GZ7L2eF4WMMVxcXKBa/U5VfXMVFouFJBRkxWIRH/ZKKJWKEovxGe/R/F5JrJUkLv0Dvyi0bRv75UN8PDjG8ck3nJ6eYf/ojPAZvhL+vH+Cg/IxykcVfPpSweHRugQWc4flCu2pbGc4Xc7wo1bDXb2JhqLg6kbBbV1Bo6HAY4uXnNiUvnnCyXQ9Lqn4bCPDxXyOsevgUnlAuzNAt6firqni4VFFT+1DNX04fgw/iKBZMVw/guOF6A9DeBKL+eiVcElZOoGHn/dN6KaL6Yze4zlYOgNPcxh2giBOYdkuft22afTAsylGfg6WZPDCRO7ZUhiwCI2+ga5qYmSN0VYt6EMH+WQGl8jjJKdKaX6MgT6EObLxQHscL0A2XcJPFruELX2EvmbBMIdodocYGBaSNCMlmVQo1HR1TxJqxghKx5SqGZ9gHEw2CRckO8AjKQqiHGmWwyI7QZwhihPoZMcnW0HEpLWYiBnPpWWBvUDMs90Mq1c3dCgaKeEwnYR+wpHwDEM3RcQyjEnN+WWDcrboPZXkEeMIaW3kZa+E89kcYcLQJMuCsD/QUG8N0BuY8oBE24gMeTZBR3PQ6dGaqlEn9ClvG5M5EPDVdoZ+FKJn+yQ/RRBG0McxtQqTlo0nywKLtvECaqGQQaM9IgaxJhztWD6/U+Sh5JOptOAGlBfbJjRsTiRkM+YwnPX4d0Lfo5tSx1XtHs1WC63eiFSL7BL5oU95RoJE9GS0LoFD+okficz5hmUidAMfV60OrunKXV/XcN/W14Txn4RPCqM1lgp3CEXbRNQ2I0dmKGyKDeIGxIy/nbBjuURCDcz4mwh/A4vjsB8LVEK9AAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Do align field containers to the grid.",title:"Do align field containers to the grid.",src:"/static/0b54b37604c07a6d79627b5aebe84a86/a5df1/dropdown-usage-4-do.png",srcSet:["/static/0b54b37604c07a6d79627b5aebe84a86/7fc1e/dropdown-usage-4-do.png 288w","/static/0b54b37604c07a6d79627b5aebe84a86/a5df1/dropdown-usage-4-do.png 576w"],sizes:"(max-width: 576px) 100vw, 576px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    ")),Object(n.b)(f,{type:"dont",caption:"Do not align field input text to the grid and hang the container.",mdxType:"DoDont"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"576px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"100%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAACs0lEQVQ4y61Ta1PaQBTlD5T47+1MVRCr/R32QwfLoKKAIAYSSMj7tXkBJpzeTSglY/vFmpk7e9i9e/aecy+17XYL/vH1I6J2SJjn+X9H7TfZR337ChljaLfbuL7+TnH97qhlWVYQcrJP9TqOBAGCUEedMF+FeomPjoTdmVBg4R94X6FuGGgcf8bp2Vc0L77h8vIKJ80rnF9cFfjzyQVOG+doNFs4/tLCWbMMjvneWaNFOa2qh7kboH3zgG5viH5/gHZ3gNveAI+ErSDb+8TWdGeHw3W55hTR5sDDV5Juz2Q89EU8TSS8iFPcD6Z4ep5BFCkWDkwngOP6kLUAluPDtD3MVI+wR5jv+weEeQZvrhSEkmJis8moqlcE0RphnGBhRnCDGJph4ef9mFYbUbLG0knBohSOF2JhhFXCcKlj+ETVSSqWmo6RuIRuedi85jCDDYIwpYgxnuqQ5iqUpYERYU03Ea8yOGFeJWTKEs8vKqZzDYqiYjhRoOo2kpQqsZOiQhYmeJnbBaG8oBzKV1SteMxwV1UPA0pQdQbbTxAnKTSS4/gxPJ8Vcrgsd4cDIuZSS8kJbI/vsz+EGf1tPFnBTecRI2pKSNIUk0j8CCFdUK0YPktovCz86PQxVzT6HRfkfhDBozOuoiI5Ig8H5OFYnGMmyegNZ1A1GzmlFA0iWVGywkQ2MREliFPKoXyZmpmuqaB4+1bykl40Xeqo52OuBzQqjCoI95I55mNj08w6JFOmHJdWfsYVVSS70gJ3vWfMFjrSFW9EDMslv1iVcGHQg2SFR1L5OHHJfyV0aLA7t0N07vo0PiOMZ3rRFJ8TmvxSeZmTu34ZHHtB6bVCOQcekgdUYZ884YTd7m0xNk6QlFVVCHcV+iXmlb4l3HmokD/cQ8bKBNvjkqP3E/I5tOgiC99H+Asp6K+5Vpi6jgAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Do not align field input text to the grid and hang the container.",title:"Do not align field input text to the grid and hang the container.",src:"/static/455c74b1f75ca9f936ac7d21d969a8c8/a5df1/dropdown-usage-4-dont.png",srcSet:["/static/455c74b1f75ca9f936ac7d21d969a8c8/7fc1e/dropdown-usage-4-dont.png 288w","/static/455c74b1f75ca9f936ac7d21d969a8c8/a5df1/dropdown-usage-4-dont.png 576w"],sizes:"(max-width: 576px) 100vw, 576px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h2",null,"Content"),Object(n.b)("h3",null,"Main elements"),Object(n.b)("h4",null,"Labels"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Labels inform users what to expect in the list of dropdown options."),Object(n.b)("li",{parentName:"ul"},"Keep the label short and concise by limiting it to a single line of text.")),Object(n.b)("h4",null,"Helper text"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Helper text is pertinent information that assists the user in choosing the\nright selection from the dropdown menu."),Object(n.b)("li",{parentName:"ul"},"Helper text is always available when the dropdown field is focused and appears\nunderneath the label."),Object(n.b)("li",{parentName:"ul"},"Use sentence-style capitalization and write the text as full sentences with\npunctuation, unless space is limited.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"66.66666666666666%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAAA2klEQVQ4y5VT2Q6EIAz0/79S48ETGjUqnt0M2RIpyLpNJhXoOa0ZfeW6LqvP83Tfb0TaZvLBGENt29I8zzRNk9XbtgVY19UmZ1/2z/jAFzAsisIiz3Mqy5KGYaC+7x1wRlLY3gMCQYXIviyLrRR633fPQUKKVyG3wFwyYoGe7oOWURGq/GcoyZbBi9ba8QaN9iUwrOM4gklHOWyaxqKqKlJK0TiOAbquc514Ad8QnRpKksOngG/58zhkAS9y58CrBFaKOXxcGx5KXdcehwgqAQ6Tix37L3/dx94+o7YAKofTrpsAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Dropdown assistive labels, helper text or none.",title:"Dropdown assistive labels, helper text or none.",src:"/static/33846e225ce7eaa98750f93aff922c8b/3cbba/dropdown-usage-5.png",srcSet:["/static/33846e225ce7eaa98750f93aff922c8b/7fc1e/dropdown-usage-5.png 288w","/static/33846e225ce7eaa98750f93aff922c8b/a5df1/dropdown-usage-5.png 576w","/static/33846e225ce7eaa98750f93aff922c8b/3cbba/dropdown-usage-5.png 1152w","/static/33846e225ce7eaa98750f93aff922c8b/92c65/dropdown-usage-5.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h4",null,"Field placeholder text"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Placeholder text is presented in the field by default if no selection has been\nmade from the dropdown. This is important to have in case the dropdown does\nnot have a label above it."),Object(n.b)("li",{parentName:"ul"},"Use clear placeholder text for the dropdown trigger so that users understand\nthe purpose.")),Object(n.b)("h4",null,"Options in a menu"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Describe the dropdown option succinctly in one line of text."),Object(n.b)("li",{parentName:"ul"},"Never use decorative images or icons within a dropdown."),Object(n.b)("li",{parentName:"ul"},"We recommend presenting the options in alphabetical order.")),Object(n.b)("h3",null,"Optional versus required fields"),Object(n.b)("p",null,"All fields in a form are assumed required, and optional fields are tagged. For\nmore information, see the\n",Object(n.b)("a",s({parentName:"p"},{href:"https://www.carbondesignsystem.com/components/form/usage"}),"form component")," usage\nguidance."),Object(n.b)("h3",null,"Overflow content"),Object(n.b)("p",null,"Avoid having multiple lines of text in a dropdown. If the text is too long for\none line, add an ellipsis (…) for overflow content, and accompany with a\nbrowser-based tooltip to show the full string of text."),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"56.25%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABtUlEQVQoz5WSy07CQBSGWzTGlbJw5cq9vocrV76AL+ELaHRHvAbZsdC49xEECwWhokC4WCK32GK5U4qUlvGfpiVWTIwn+XNyZuZ855JhGNsmk4nlDcNgNE1jB4MBq6rqX7JyqMd7Zs6m0ynzX3MamTO/3295n8+3xvP8OiFkBfJSobp3OBx60YmjVV3XvaPRaNmZqt/vu4HNZnOR+k6ncyxJEqnX6x+VSqUty3IbgDagMyFWer2eAcgRzel2ux5n/JmhmgM8Q1ek1WpNkUzwkODOJXpGDaBze4cevHcDTdO0gLg4oUl4PMaYJqC/SadAFD+1m/E0Go255c6A4/GYAj8BNGg38C7hzLSnuKA5WM/SuyS5gYqiWMBSqXSJ/ZBCoUBEUSTpdFrPZDKDbDarUuVyORVxH/sltVrt8DvjQ1HYWVAul60glUptCoKwC+1A24lEIphIJp+SghCJPz7yiCP4BUI0Gn3D/Q0fi+2j+IEkyxtzX6darbI/z2Lx+N4Dx11Hed4fCocD96FQAHEA8RV8kOO42+eXl7tXUdxyJUr2DvL5PIuKC8VicQGjLf7nkw81jfkCwZjBPV3XwuUAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Dropdown overflow text truncation.",title:"Dropdown overflow text truncation.",src:"/static/0f3718f59d7c604b0cbca1f9e41d29a3/3cbba/dropdown-usage-6.png",srcSet:["/static/0f3718f59d7c604b0cbca1f9e41d29a3/7fc1e/dropdown-usage-6.png 288w","/static/0f3718f59d7c604b0cbca1f9e41d29a3/a5df1/dropdown-usage-6.png 576w","/static/0f3718f59d7c604b0cbca1f9e41d29a3/3cbba/dropdown-usage-6.png 1152w","/static/0f3718f59d7c604b0cbca1f9e41d29a3/92c65/dropdown-usage-6.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h3",null,"Further guidance"),Object(n.b)("p",null,"For further content guidance, see Carbon’s\n",Object(n.b)("a",s({parentName:"p"},{href:"/guidelines/content/overview"}),"content guidelines"),"."),Object(n.b)("h2",null,"Universal behaviors"),Object(n.b)("p",null,"The behaviors listed in this section are universal across all of the types. For\nbehaviors that are unique to each type, see the sections below."),Object(n.b)("h3",null,"Direction"),Object(n.b)("p",null,"A dropdown can open up or down depending on its position on the screen. For\nexample, if the dropdown appears at the bottom and close to the edge of the\ninterface, the menu expands upward to avoid being cropped. By default, our\ndropdowns open downward."),Object(n.b)("h3",null,"Elevation"),Object(n.b)("p",null,"Carbon has one layer style called a ",Object(n.b)("inlineCode",{parentName:"p"},"box-shadow"),". The box-shadow is placed\nbehind the dropdown menu when open. Box-shadow is also used in other components\nthat have overlayed menus, such as the overflow menu and date picker calendar.\nThe SCSS for box-shadow is ",Object(n.b)("inlineCode",{parentName:"p"},"0 2px 6px 0 rgba(0,0,0,.2)"),"."),Object(n.b)("h3",null,"Scrolling behavior"),Object(n.b)("p",null,"Scroll bars may not always be enabled so we recommend showing 50% of the last\noption’s container height to indicate there is more to see within the menu. We\nrecommend starting a scroll at the sixth option in the menu list, but this may\nvary based on your specific use case."),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"75%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAACLElEQVQ4y5WTTYvTUBSGbxu6EGGcjTtXgg64EPVvCMIo+AcEJ1GnjA7IrAtKd4JVf0O7KYgLN1ZmIwyxLaQzi6ZQpk3SNpPmq20Sm4/p9dzbGSVNBOfCy5twz3nOufckCJ2tSqVCvVwuo2q1mqnVapnZbIYcx0HnniayyD5RYpVKJXTRNZ/P0zfy+Tx1lmUvFQqFq8Vi8YqqqrkgCHKu6+Y8z/sj8o4xzkGH2XOoLMtxoKZpDHHTNB8fwwJYCxIFOEqamrZtH4M/PDtyFgrFgZZlUSAEPoPqeDKZYOgOh2GYEHREQjDkcCQHOmWGw2EcOB6PKVDXdRYqYggIABpBcATvq/IJ0DCMpyQHumNEUYwDAUSBEMQRIHRKYAvynKKQACFni+TA1TCdTicObLfbFAgbXLfbxeCRJEmLXq+H+/3+qkI4EYmhQBgIw/N8HKgoCgUOFIWzTBMrshzBoBYkMUVh4PsYYilQH6iMcOc1EjZe/gUaprmcsmWyU3KHo5E/mU4j1/Mix3Ujx4uJTsW0LXqHAcbZxHeoj06WQ1G1bRyeYls38KkPVxVECYW/llPWhyfbdMojg2nd2o13KO03aRXpe/O+/KP1bXBw9FlriF+0OmjV6yLZq8lf+c19dHv98N7edYBdAzGxLqHohX+9o7t7l4WbO+sAW2tt7CZhxEGZ/9S/K/3cfEu9/uANOnjyDvFb71HjxSfU4D4k/flH6vVHRSTc2KF3t9Qr9BukjW2YvXsuogAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Dropdown scrolling menu option cutoff.",title:"Dropdown scrolling menu option cutoff.",src:"/static/f4a7263ad27073afd992ffffd69ad2d9/3cbba/dropdown-usage-7a.png",srcSet:["/static/f4a7263ad27073afd992ffffd69ad2d9/7fc1e/dropdown-usage-7a.png 288w","/static/f4a7263ad27073afd992ffffd69ad2d9/a5df1/dropdown-usage-7a.png 576w","/static/f4a7263ad27073afd992ffffd69ad2d9/3cbba/dropdown-usage-7a.png 1152w","/static/f4a7263ad27073afd992ffffd69ad2d9/92c65/dropdown-usage-7a.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h3",null,"Interactions"),Object(n.b)("h4",null,"Mouse"),Object(n.b)("p",null,"Users trigger a dropdown menu to open by clicking the chevron icon or clicking\nanywhere within the field. Users can close the menu by clicking the chevron icon\nor clicking outside of the menu. ",Object(n.b)("em",{parentName:"p"},"Note: You can only open a combo box by\nclicking the chevron icon or by typing in the field.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"56.25%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABhElEQVQoz5VT207CQBAt1C/QRP8CxTeM/oDxJ4zxEmOML+qTfpjGN4JgkJSWaKC2FQqGtru09EIrga7TTTVSSwyTnJzuzpyz0+mWYX6FWZeYRWMoKOkJi5e/eQ2Mt4ELUFywG+9bKShAfgfyq5HGFt4Z2Js1RLUWG3d50Cs3SPdR8EAUwDow+QhyDCmAfdd76RDI7cca1owb+olORaCsPjVW4DkvFWu5dplfn4Mc1GwCL0caYEYpcYkOq80sPa32tqcWuRJ+bt3bdflhyElpuMPVZgV4l86Rk7IOn5glklT6ygOldzbFDnG7OgmxS6YpGOsWIRNCoPaUzlDV2I/XxAc1MKKGxgCf2K5DNEP/dDx3MgcBgUDm4CjSjAKfbYpiokPDoIYIoWPLsoimaYHjOONU2I4fhiHBCB1SQ89jxVbC0DCMpYgxxhfR6Z7nkf8Cas+p4WjEiskO2+12Jua8LMs3iqJc9fv96zm4BNxC7Uak0XU9w3Hc38vt+35m0T8FGp1ZfwFXG78v8HpVXAAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Dropdown closed and open state click targets.",title:"Dropdown closed and open state click targets.",src:"/static/73be78be98a355e8019e905662e434ac/3cbba/dropdown-usage-8a.png",srcSet:["/static/73be78be98a355e8019e905662e434ac/7fc1e/dropdown-usage-8a.png 288w","/static/73be78be98a355e8019e905662e434ac/a5df1/dropdown-usage-8a.png 576w","/static/73be78be98a355e8019e905662e434ac/3cbba/dropdown-usage-8a.png 1152w","/static/73be78be98a355e8019e905662e434ac/92c65/dropdown-usage-8a.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"To select an option the user can click anywhere inside an option container.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"56.25%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABX0lEQVQoz5VSy07CQBQtmYQt+AX8kC70A3SnaPxH1y6oMYQIhA4IU/qYttMnfeJ4OxST4pjITU7ONPeeMz3tVZSmoigSHMdxfe4A/wc/muO5VWVZKudWkiTyRlVVgtM07XLO+/DcC8OwD4I+3H6KHlx+Adw9mjLG2obM81DNYRDcEUJyGHBA4EF8Gajv+3vg2+ZzoeQ0sssOhp7PHrMi5y5jPM0zKaIk5nWxwH8Qb5ju0EbX24Y2XgtDuiRDf2Py7XxZRlu6D+UoeJRzmD0Ymi6ajt5PDNUZangYTD65pU6LYLKqAHsJ8q+Vw+nb/F5E/lij2ctr29CyrIOhbT9nacapTXmR51Lskp2IDDNPYm2iGM2ms7ahhnGnZozxYKEtrjWsXRJdvyI6kaHu3eAlHtSarWEoI1X9vTobnZy9h47ryBt685eAO4ZhINM0EcT/E5RSBOslUrmuq4zHY6H/Btugux20X1L2AAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Dropdown menu option click target.",title:"Dropdown menu option click target.",src:"/static/7ab74702085d8e88f3f8a992ab0bca49/3cbba/dropdown-usage-8b.png",srcSet:["/static/7ab74702085d8e88f3f8a992ab0bca49/7fc1e/dropdown-usage-8b.png 288w","/static/7ab74702085d8e88f3f8a992ab0bca49/a5df1/dropdown-usage-8b.png 576w","/static/7ab74702085d8e88f3f8a992ab0bca49/3cbba/dropdown-usage-8b.png 1152w","/static/7ab74702085d8e88f3f8a992ab0bca49/92c65/dropdown-usage-8b.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"To clear all selected options from a list in a ",Object(n.b)("inlineCode",{parentName:"li"},"multiselect")," dropdown, click\nthe “x” icon next to the value inside the tag.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"36.45833333333333%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsSAAALEgHS3X78AAABBElEQVQoz5WRy2rDMBBFLUSWzkc0HxUtShftxxW6yLKFQp/rUgglpIu6rmQZx7GThR/V2JSqMyIuCLzJhcvRg7mMRkFwUFEUjqaD4PnxiX19fDIDwOq6dm6aZsyuhjisPVlrg2NljBm/GMKQE2N/psb+hrj23LZt2HVdCAC0n/Z9P6EaPHP2FEURJ2535cXi8sq+vyy/pU4gUQriOAYcCeCzoKoqcoOhFnlONUiO9gOxiBHzYju7vb45Xb0u51IpIaUUeCeyLBNlWQoMJs/zPD9Dnhzmz4Y/8KR0wo6d4WiQC1PKcbffs4e7e75+W/Fss+FpmnKtNceOOHb4bwwiugaQzqQ/kV7pHQeq1pwAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Multiselect dropdown tag clear click target.",title:"Multiselect dropdown tag clear click target.",src:"/static/94b7db27b96a89ac454b5319c453e3c4/3cbba/dropdown-usage-8c.png",srcSet:["/static/94b7db27b96a89ac454b5319c453e3c4/7fc1e/dropdown-usage-8c.png 288w","/static/94b7db27b96a89ac454b5319c453e3c4/a5df1/dropdown-usage-8c.png 576w","/static/94b7db27b96a89ac454b5319c453e3c4/3cbba/dropdown-usage-8c.png 1152w","/static/94b7db27b96a89ac454b5319c453e3c4/92c65/dropdown-usage-8c.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"To clear a selected value in a ",Object(n.b)("inlineCode",{parentName:"li"},"combo box")," or a filterable dropdown, click the\n“x” icon to the right of the field input text.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"56.25%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABX0lEQVQoz5VSy26DMBAEWco16Rf0h9JD+wHtrUmrfmkOOYQDSkReCig8jEmxTTAhddeWiYqgUrvSaBDend1Z27JMUEo1M8bUtw3cgf7PuU392KY4s1lZ3GoUOlFVlfXfoGfef1DXteaiKAZSyhFgCF1HP8EN1+w8/LrUdzmjA1XDObeyLGsLEkKQ4jzPX3zfFwAMFkkLOaDgJPP8hAThlYnzs1kXUqK9gtDpTQghMcayLMsuRCkpOUkVp/xzYlwhGKAteDgctCAcTMMwlNvt9gKi1yRJOsAprpQ45E6aYRaLRVtwtVohw9Pdbidd1632+30NuPZAxHEsIfe1GWY2m7UFoyjSgpD4obrDJFJZ7wNY1JYh5908G7RcLtuCm83GNnzved7jer0eB0HwALb6MAY8qVxVczwerfl83n06ncX+IWDP/QcwTcM2dERwMQjs/wqwq25Wu0rT1HIcR9d/AyxHuksLVGaPAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Combo box and filterable dropdown clear click target.",title:"Combo box and filterable dropdown clear click target.",src:"/static/c081e6be9ece09146da8edae9b9adf83/3cbba/dropdown-usage-8d.png",srcSet:["/static/c081e6be9ece09146da8edae9b9adf83/7fc1e/dropdown-usage-8d.png 288w","/static/c081e6be9ece09146da8edae9b9adf83/a5df1/dropdown-usage-8d.png 576w","/static/c081e6be9ece09146da8edae9b9adf83/3cbba/dropdown-usage-8d.png 1152w","/static/c081e6be9ece09146da8edae9b9adf83/92c65/dropdown-usage-8d.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h4",null,"Keyboard"),Object(n.b)("h4",null,"Dropdown:"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"The dropdown field is the element that receives focus. All keyboard\ninteractions happen from this element."),Object(n.b)("li",{parentName:"ul"},"Users can move the highlighted option to the next option by pressing the\n",Object(n.b)("inlineCode",{parentName:"li"},"Down arrow"),"."),Object(n.b)("li",{parentName:"ul"},"Users can move the highlighted option to the previous option by pressing the\n",Object(n.b)("inlineCode",{parentName:"li"},"Up arrow"),"."),Object(n.b)("li",{parentName:"ul"},"Users can open the dropdown menu by pressing ",Object(n.b)("inlineCode",{parentName:"li"},"Space"),", ",Object(n.b)("inlineCode",{parentName:"li"},"Enter"),", ",Object(n.b)("inlineCode",{parentName:"li"},"Down arrow")," or\nthe ",Object(n.b)("inlineCode",{parentName:"li"},"Up arrow"),"."),Object(n.b)("li",{parentName:"ul"},"Users can close the dropdown menu by pressing ",Object(n.b)("inlineCode",{parentName:"li"},"Escape"),", ",Object(n.b)("inlineCode",{parentName:"li"},"Space"),", or ",Object(n.b)("inlineCode",{parentName:"li"},"Enter"),".")),Object(n.b)("h4",null,"Combo box and filtering:"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"When typing a character: focus stays on the field while an option in the menu\nis highlighted that best matches the typed character."),Object(n.b)("li",{parentName:"ul"},"When typing multiple characters in rapid succession: focus stays on the field\nwhile an option in the menu is highlighted that best matches the string of\ncharacters typed.")),Object(n.b)("h4",null,"Multiple selection:"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"The multiselect field receives focus if none of the options are selected in\nthe menu."),Object(n.b)("li",{parentName:"ul"},"Once an option in the dropdown menu receives focus, users can press ",Object(n.b)("inlineCode",{parentName:"li"},"Enter")," to\nselect or deselect the option."),Object(n.b)("li",{parentName:"ul"},"Users can open and close a dropdown menu by pressing ",Object(n.b)("inlineCode",{parentName:"li"},"Space"),".")),Object(n.b)("h4",null,"Screen readers"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Labels must be announced to the screen reader on focus. Ensure the helper text\nthat appears under an input is read when an assistive technology user stops at\nan input using ARIA."),Object(n.b)("li",{parentName:"ul"},"VoiceOver: Users can trigger a state change by pressing ",Object(n.b)("inlineCode",{parentName:"li"},"Control-Option-Space"),"\nor ",Object(n.b)("inlineCode",{parentName:"li"},"Space")," while the dropdown field has screen reader focus."),Object(n.b)("li",{parentName:"ul"},"JAWS: Users can trigger a state change by pressing ",Object(n.b)("inlineCode",{parentName:"li"},"Space")," while the dropdown\nfield has screen reader focus."),Object(n.b)("li",{parentName:"ul"},"NVDA: Users can trigger a state change by pressing ",Object(n.b)("inlineCode",{parentName:"li"},"Space")," while the dropdown\nfield has screen reader focus.")),Object(n.b)("h2",null,"Dropdown"),Object(n.b)("p",null,"Use when you can select only one option from a list at a time."),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"By default, the dropdown displays placeholder text in the field when closed."),Object(n.b)("li",{parentName:"ul"},"Clicking on a closed field opens a menu of options.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"84.375%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsSAAALEgHS3X78AAACUUlEQVQ4y6VUO4taQRj1euOauBKI+Q+phBRCfkJKmxRBLCSk3dqUgTRZSDC7XRp7Ee0EwcbCV6kIKoh6fT+vj/jW3evkfBOveLOSRDJwODN35jvznfk+1emOhtvt1p07GGOnN2w2G2er1Xpht9ufOp3OJ/8i6PF4Tm/IsiwSTyaTN7VaTa5Wq7VGoyFhLc3nc2k2m6moAeXxePwD4wPFgPXT6fSXEAJV6GkNsVelUul7uVz2gG/r9fptq9X6BvGbZrN5g4s/j0ajT2DPcDh8TTGDwUDAOa7z3+PBG0LVqKJSqRi73e7jxWJhgqVLWDPBrgl2LukbAftmZGpG1mZkbZIkyXiswa0SYFWfz+cF3KgHHhFgw4BAA0QM7XabA/YMsMsZ30UkIaga6rP9vQXOtMyRy+UEWhcKhRfpdPoK6/fIwAG7Dtg+AM9A/BaVdWH+cl9lAWe1RUEgbxu8k2u73TLYYqgm22w27P7+XoP1es1oIOYLxUBYPLTN730IERd6j6Eod8vlUkE2HLjoMAc2JIhz1xSz2+1EtJlWEEUR9+xC+gyVvOv1egrmCjGKo3Q6HT4HNqvVis5cqxlmMhmtICrKBXHoHdkFU5bcNjEqzCDE5/1+n1vGJV8pBhmL2WxWK4g2EPfWHchkhaA+bpbxNhwIko/WPUDBL+UjxSiKoi8Wi1rBYDDI2e/3X0QiEUs4HLYEAgEO7Fl8Pp8Fe3yOb8/Az7HmfyChUEjn9Xof9lQ0Gj27D5PJ5OmNWCx24Hg8LiQSCSGVSv0ROMdjqCCUJY2fADlr7LuhNA8AAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Dropdown closed and open state.",title:"Dropdown closed and open state.",src:"/static/fabc763d3bbfcaf8866d8b81a9892615/3cbba/dropdown-usage-9a.png",srcSet:["/static/fabc763d3bbfcaf8866d8b81a9892615/7fc1e/dropdown-usage-9a.png 288w","/static/fabc763d3bbfcaf8866d8b81a9892615/a5df1/dropdown-usage-9a.png 576w","/static/fabc763d3bbfcaf8866d8b81a9892615/3cbba/dropdown-usage-9a.png 1152w","/static/fabc763d3bbfcaf8866d8b81a9892615/92c65/dropdown-usage-9a.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Selecting an option from the menu closes it and the selected option text\nreplaces the placeholder text in the field and also remains as an option in\nplace if the menu is open.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"84.375%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsSAAALEgHS3X78AAACIUlEQVQ4y6VUOUsDQRTe7AaNKxhrCYh9js4utanSCIoIprDIP7AWQuJRCClS+AfS52+kTBHIfW/u+74cvxlnxc0aIfjg483s7vvee9+8WUHgRgj59irG47FhOBwaRqPRNrAY6tW1xlTSXWw2m/3+IhQKMR8MBg/D4fBpJBI5abVa5ul0akb2b6BqM6o2L5fL48lkYqIx8/lc6PV6WsJOpyNR3+/3b8rlMqnX6wMQDLdYF8RkMBg88hhJ13K322WEyOShH8MTtENQIfM/geAPyENA9EpjFouFVKlUtISlUokR4oWnWq0S+GW73V43m801Wt/EHCREUZQXGoOkUiwW0xImEglGmEwmPZlMhsAvCoXCKp/PrzeB5zMkIqlU6pnGQB4pGo1qCRuNBiPEh/cQmbUM4QmtZBM4DNoxQQdvNGa1Wkko6IsIGYVcLkdh4PszZL7NZrPXaOkarf+GK+AOlTr4gRrQEePSGETeeQ51swtWEdUx0DX0M6bT6T3s91DFnygWi0Z0Iqoc1FPCfRUg2od2JmgiQye5Vqsd4sS3AvN6QBP/5BD+a7qW+YEIEFjk83iOQ3lHO2+oMgD4MegBvg5gqJ8AP25JEDfmgmsvIo7x6MYGo3CJFx1oVMTpKRhiBc8qAPUKblQBsqSx7mH9wG+ZqLvLLpeLeafTafR6vUdut1u2Wq2y3W6XLRaLyeFwyDabTd7pD+Xz+XbWMB6Pa/afXSF/37LbmHwAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Dropdown selected state.",title:"Dropdown selected state.",src:"/static/2386e57044dd307c2247238dd8c2c564/3cbba/dropdown-usage-9b.png",srcSet:["/static/2386e57044dd307c2247238dd8c2c564/7fc1e/dropdown-usage-9b.png 288w","/static/2386e57044dd307c2247238dd8c2c564/a5df1/dropdown-usage-9b.png 576w","/static/2386e57044dd307c2247238dd8c2c564/3cbba/dropdown-usage-9b.png 1152w","/static/2386e57044dd307c2247238dd8c2c564/92c65/dropdown-usage-9b.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h2",null,"Multiselect"),Object(n.b)("p",null,"Use when you can select multiple options from a list or to filter information."),Object(n.b)("h4",null,"Making a selection"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"By default, the dropdown displays placeholder text in the field when closed."),Object(n.b)("li",{parentName:"ul"},"Clicking a closed field opens a menu of options. Each option contains a\ncheckbox input to the left of the option text."),Object(n.b)("li",{parentName:"ul"},"The menu stays open while options are being selected. The menu closes by\nclicking the field or outside of the dropdown.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"84.375%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsSAAALEgHS3X78AAACRklEQVQ4y62Uu25TQRCGV+dALF9Ej3gS+nSUUANCNDxAeIYgGly4sSK7oaIF0rlByEEUkSJhW5ZJfL/GsR3fjc9h+eZw1rIVWwoSK/2aPbsz//w7M7ZSa2tvb2/9U0WjUZVIJJTWWl1fX6vRaKSGw6Gaz+fq7OxM1et1z6/RaHh3u9YdEBB+dYt1eXm5/aLb7Vpi+/3+o1qt9qNcLn+vVCrfrq6uTiaTycl4PF6B768ozqDqlcRgLc7/EpVKJQ+GcDAYPITwPYRHxWIx0Wq1kpwle71ekmTGHpHoA/snRky1WvV4/v+CNWCAogDqguwjFxcXEbKG2+12mDptQ6TZbAbxC6xzCKEFkSX2/PzcWi6XtxYTj8cVdfbiDccNp4ODg3AsFnuA831qd4+RCVKv0Gw2C02nUw80JcR5eLFY3N32ZA8U2JZvuveYrF0ylkGJghchKdLJFejoT5L1mcnXfoxF/GZTDCEdfI4ajSpNkMZZQ6hRswIKtSzu30oMg26bIV8fUNu3z4QEhyUNchkfF5UuqlzUGSyEkOSHEsPWzufzuwl5iqa7Dvjd6XQ8RXIGqYZM8EsIedUbiXFd1y4UCpuEdNj27VNqoTOZzCKXyy2xDrV0GBGHOwfFDr/duSTA79Avk316erpJiJPt25emhvJ0ATXSjJOnVO6kprJQ/05iqKudzWY3CamZ5dt9upxiYD+h6DPqjiH3gJJjnin7j9gvlOSF3xTrBqFf3H/+pe2MMRdi5b8tnU6rVCrl/e/J2S6YGLP/A3ETnLQqRirzAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Multiselect dropdown closed and open states.",title:"Multiselect dropdown closed and open states.",src:"/static/9b50bf35369a20ed1b9a6a67cb3c8df8/3cbba/dropdown-usage-10a.png",srcSet:["/static/9b50bf35369a20ed1b9a6a67cb3c8df8/7fc1e/dropdown-usage-10a.png 288w","/static/9b50bf35369a20ed1b9a6a67cb3c8df8/a5df1/dropdown-usage-10a.png 576w","/static/9b50bf35369a20ed1b9a6a67cb3c8df8/3cbba/dropdown-usage-10a.png 1152w","/static/9b50bf35369a20ed1b9a6a67cb3c8df8/92c65/dropdown-usage-10a.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Once options have been selected from the menu, a tag appears to the left of\nthe text in the field containing the total number of selected options. The\nplaceholder text can change to text that better reflects what is selected."),Object(n.b)("li",{parentName:"ul"},"Selected options shift to the top of the menu in alphanumeric order."),Object(n.b)("li",{parentName:"ul"},"Unlike dropdown and combo box, the menu does not close once the user makes\nselections. Because multiple selections are possible, the user needs to click\noutside of the dropdown or on the parent element to close the menu.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"56.25%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABl0lEQVQoz61SyWoCQRAd7VN+wPgtOeRXkktiJMm3CMFcAjnlrHgXERVBUHHBg4q4r+O+zmQmWnklM+IYcwik4fF6qfe6qrolyRhEdGC/328DM4Qsy2K9XovlcilWq9WB5/M5z22sAUvYk/5lbDab8welUslu3Hbt8Xg+fD7f22KxeAW8EHmR5TFekNE79q9Yg7VNURSrYaVSEczj8fg5GAxSMpkklEUIpt1uZ4Gu68RjNBo9sWYymYher2c1zOVywmBXPp8nZKwWCgUtm81qxWJRq9frWq1WM6EMBgOOuWNNo9EQiUTCaphOp01DdzQapVQq9YX5LpPJULlcJphQtVo1oSM7wkWuXw15k7nZbD50Oh0C661Wa9tut7fD4XALg2N8appG3W733iwZ1VgN0Tuzh4/cI3wXghFhTSw+Bh5j38PpdOpmjaqqAm9gNURT94b9fv8WWa2BHjKVkYU8m81O0QVUXHpj/Aw7yrcahsPhPYdCoYtYLOaMx+OOSCRyiX6egwNwcixrEC8FAoGff5EP/jpOH+Mb87m1bm0tiv4AAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Multiselect dropdown selected state.",title:"Multiselect dropdown selected state.",src:"/static/808fd5bc84d3dd2c99aab0ec19ad48ba/3cbba/dropdown-usage-10b.png",srcSet:["/static/808fd5bc84d3dd2c99aab0ec19ad48ba/7fc1e/dropdown-usage-10b.png 288w","/static/808fd5bc84d3dd2c99aab0ec19ad48ba/a5df1/dropdown-usage-10b.png 576w","/static/808fd5bc84d3dd2c99aab0ec19ad48ba/3cbba/dropdown-usage-10b.png 1152w","/static/808fd5bc84d3dd2c99aab0ec19ad48ba/92c65/dropdown-usage-10b.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h4",null,"Clear all"),Object(n.b)("p",null,"To clear all selected options from a list, hover over the filterable tag and\nclick the “x” (or ",Object(n.b)("inlineCode",{parentName:"p"},"close"),") icon next to the value. To help with clarity, a\nbrowser tooltip appears when the user hovers over the “x” icon to indicate the\nclick action results. If you want to unselect individual options, you can do so\nby unselecting the checkbox of each option."),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"84.375%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsSAAALEgHS3X78AAACU0lEQVQ4y7VTO4taQRQe5wav7LpLWtliy5A0qfcnyBJIEUiTPxCygRRbpdomra2Kl2gRDBgVbAXFIrKbdK4GxPf7/X4/Fm++mXhvNDGPhWTg49yZueebc853DiG/WbIsE4vFwm2/3yfD4ZAMBgMym81IJBIh5XKZ/1epVPjdr9adyWQiWq1WLfmL1Ww2d19ks1nK7HQ6PbXZbDGv1/u50WhctVqty/F4fDkajVRg/xERf0FUz5kPLMX5N6JcLseRz+c54XK5PEGa70Ao1ev1t9Vq1d7r9eydTsfe7XYVK7XbbRe+nzAfPEqLxSLn+fcLrKKCdDotIhpdOBzeR9H3UR99rVbTIwI9+/4RiH4vk8mImxyMkDIkEgk6n89Z2prbBIRUKeqvYRownp9+cLlcdx0OxwO3230fxT9GyxhQcAPEUoEuMCwWiyMEcLArZUUUYS3KM0mSZBCOIMoASt+A8Ab9pwKqzlarlQyl3zAfWAGl2RalVCqRtWJHgUDAGAqF3keurz/hoUc4M4L8FOQKjKjfY5zdUwZgM0KeO6sB6iGoD1Qqug9u9+GfasgyY75qDfGhVRRKpVJapKRDj+nxqsiA8TpANLtwiLu9TX+u8v/oQ454PM4lh30Yi8UuotHoa5y/wlScQe2XEOZMAfYvkMk5xDlhPuhdDZsURPudGIfCei6fIpVFoVDo4IcBCj+EikPcq8C+C0IZj10wH1gB59uR+v1+bk0mkwa1EwCqwGw2U5/PRz0eD8WMU6fTSZPJJEUn8CEIBoMEd7vTv+1CC23tvwJ+3EB27I9O4AAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Multiselect dropdown clear tag interaction.",title:"Multiselect dropdown clear tag interaction.",src:"/static/4774c40878917d30436cc2ba15ccee65/3cbba/dropdown-usage-10c.png",srcSet:["/static/4774c40878917d30436cc2ba15ccee65/7fc1e/dropdown-usage-10c.png 288w","/static/4774c40878917d30436cc2ba15ccee65/a5df1/dropdown-usage-10c.png 576w","/static/4774c40878917d30436cc2ba15ccee65/3cbba/dropdown-usage-10c.png 1152w","/static/4774c40878917d30436cc2ba15ccee65/92c65/dropdown-usage-10c.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h4",null,"Filtering"),Object(n.b)("p",null,"Use filtering to narrow down a long list of options to find the option you want\nto select."),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"By default, the filterable multiselect dropdown displays placeholder text in\nthe field when closed."),Object(n.b)("li",{parentName:"ul"},"When hovering over the field, a text cursor appears.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"84.375%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsSAAALEgHS3X78AAACL0lEQVQ4y62Uy27aQBSGx7YqmjSp+gRxsuk79AnadJFVumrVqsu+RleN8gqp2GRD2bAEsUUYBSRAokJcBEjc72Du1Hj6n6kd2YGkjdSRfh08M+fj3GzGHEuSJOcjC4VCLJVKscViwSaTiZCu62y5XLJ0Os3q9bq412g0xNl9S4GeQk/YP6xut7v7YDAYyGSHw+HbXq+XwcUb7Gnj8VibTqcuzWazCPZ/Iqov5AMrY/8PqFKpCNnA0Wj0CsBrAL+3220vrBd/4sW50171+/0f+H1OPrgvV6tVwfn/C1SPrWKx6EGEe5zzg/V6fYAIDzudziEi2KXnrVZrv1QqeZwMAsrlclnOZrMSQPJjA6rVajKgEjGIdXsQjUaFxZgcQx8ymcw71OoNdIqoT1F0p16jKWdoxkvyQSCulBnoDJdoXBg6+BEXOBw49jichF2tVhzzJ0TPtDCTF+QDq6AE7qagm4plPyEi3mw2DXTORB1NQO9qTUBE/418DMNQkLa7Fii+CwhrwMFEpA8BL6yUlXw+vzXxt0CkwFFsA3NGznyHXEDTNJVCofAwEO/nL0A3cNrM5/MNIE6tnCn/DfiZio4acpRBWNRRNAIfCQ44RWhawEs75S0gnBTLvkd0G9gR4DqgOl4zHXXVUU9bA0wDx/5XqylyLpdzAyORiD2Pz8Lh8LHP5zsKBAKq3+9XNU1Tk8mkGo/H1UQiQTqCTmKx2AvywcyyYDC4PfVwePSre7e7vwFY+qUFqloYFAAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Filterable dropdown closed and open state.",title:"Filterable dropdown closed and open state.",src:"/static/83da44c3b87e0ddd3c556372a1ff4ef1/3cbba/dropdown-usage-10d.png",srcSet:["/static/83da44c3b87e0ddd3c556372a1ff4ef1/7fc1e/dropdown-usage-10d.png 288w","/static/83da44c3b87e0ddd3c556372a1ff4ef1/a5df1/dropdown-usage-10d.png 576w","/static/83da44c3b87e0ddd3c556372a1ff4ef1/3cbba/dropdown-usage-10d.png 1152w","/static/83da44c3b87e0ddd3c556372a1ff4ef1/92c65/dropdown-usage-10d.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"The menu opens by clicking anywhere in the field and you can start typing to\nfilter the list of options. The options that start to match your entry remain\nin the list while other existing options are temporarily removed."),Object(n.b)("li",{parentName:"ul"},"After typing text in the field, the close (x) icon appears to the right of the\ntext in the field. This clears any text that’s been entered in the field.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"92.70833333333334%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAAsSAAALEgHS3X78AAACYElEQVQ4y62UyY4SURSGaUy0TJSlxqSrl76FWxPoha+gm16ZsGQvIR1csWPJzoeQJTQhTAbCGGZkHot5qCqu/ynrdqgGNG28yZ9bKe756j/DxWTSl9frNT12McZO/+BwOLTdbrc/c7vdb1wu1+tKpSLsdjthPp8Li8XiXsvlUgCIfnvK4weDgRE4HA7NtCPgXbVabbTb7eJqtSoAlocKD5TF+Z/T6fQbxVitVhM+YgSOx2MNiEM2QJkkSWy73TK4ONJms2G0cDbK43u9nhGIF2Z9t+HrrNPpKJPJRAFcnc1mKlwdaqeqKgHveDyyMgL7/b5Z362oB8O+a7Va8mg0kpG6DMihNrIsEzDA4+v1+hHwib5/oK9T2oc6tQBMnQTWajWyfKE/vy2VSrfFYtFZKBScuVxOU7PZdKIczm63S/qC569o3A1n5PN5jUP6+0w9doEqkOBMQBrPAX5BggMLnFlQSwscWVAOg+D0JTITeDyXZtPn8/2TQ5RGq1+5XDamDHcXevuvUA87Dn5GMz6dErr8EZncYL8+Wy4c0MYGQ2tbr9cMk8/Orf1+z7v8g2I8Ho8Js/rnOUR9ZATIACtw8lBbRVEMc9hoNIxAQDjQhmtIQAW3RcVt2QO6R6qHksklXN2dHWx0VAMCcg0oQ1cJyugawgkF34vuOQFxi8I8Hj0wAjG8Zn1/n06nV6lUapJMJqV4PC7FYjEJXZQw6FI2m5XgZoRuynj3nccnEgkjMBz+/bFAICAAJgJ2CYmAi5lMRkSAGAwGxVAoJEaj0ctIJHKFmFc83u/3H88UDv2Xf+xfRNjyFDfuYw4AAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Filterable dropdown typing and filtering open menu.",title:"Filterable dropdown typing and filtering open menu.",src:"/static/6c103ba30b877455fbf57e0d833dad2c/3cbba/dropdown-usage-10e.png",srcSet:["/static/6c103ba30b877455fbf57e0d833dad2c/7fc1e/dropdown-usage-10e.png 288w","/static/6c103ba30b877455fbf57e0d833dad2c/a5df1/dropdown-usage-10e.png 576w","/static/6c103ba30b877455fbf57e0d833dad2c/3cbba/dropdown-usage-10e.png 1152w","/static/6c103ba30b877455fbf57e0d833dad2c/92c65/dropdown-usage-10e.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Once options have been selected from the menu, a tag appears to the left of\nthe text in the field containing the total number of selected options. The\nplaceholder text can change to text that better reflects what is selected."),Object(n.b)("li",{parentName:"ul"},"Selected options shift to the top of the menu in alphanumeric order."),Object(n.b)("li",{parentName:"ul"},"Like the default multiselect dropdown, the menu does not close once the user\nmakes selections.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"84.375%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsSAAALEgHS3X78AAACZklEQVQ4y61TO48SURgdZuJunM1iaWHtD7DQX2ItxsXEKKXJxlYKJVYSfgKBggAtBQWBgoateL8Jy/sNw2sZmOv5bhhkli3cxJucfPfeme/c870E4WjF43HhsWu1Wj38weFwcGu322Wv1/vC5/M9Z4zJhOl0Kg+HQ3kymcij0Uiez+d0f4H9E/JZLpdCu902ElarVYnser1+63K5JsFgsDkYDOq3WCC4XSwWByiKUgWZgv01+eAsnijN5XKcsF6vv49EIuzm5oY1m01Wq9W47ff7B0AN22w2DG/9Ih88LMH/YcJ8Pm/JZDIMZzWdTu9SqdQum83u8NAOxLtGo0G4gyqGqH6Sz3g8lhKJhJGQXtlbC0JhsFso0ZA7hhwxhH2MDXLIkFOeeGylUqlkJOz1epwQIVnwImu1WlsUQ4MSbTabcasDZ06IPHJCTdOkYrFoJASRTviOCLvd7h3UqXBWoUgF0TFWRIj/fpwQIulCpVI5KIT9uA+HA1Vn95eqqmyv8Df5bLdbHjJxHZaeAyT6JQryqVAoXGF/hSJZURAr8mlFGnR8AD7j/vU+h3+JwCoSoFJEG0iPnRQQS+VyWdR5iPAcSs7JQuUZwnyKny6h6BLtYYYKc6fTMSOn9/EMbXQBIWfkq0P47wvqOJLJpLg/v3K73d9DodA1Km6DUhuqakNv2lBtDuy/oPpfcf+GfNBeJkTCeY5zqc+yxel0bjHLI4Sq4CeF5hZOCtLBgf2YJgVt802fFNwbleqVisViJup8QNSBsRI9Ho8YCAQ4aI++E6PRqIl8wuGw4Pf7T8M3lP8fF4pjOP8Btzmmq7mUtocAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Filterable dropdown selected state.",title:"Filterable dropdown selected state.",src:"/static/4aeceffecc1342b85006299ead5b1a66/3cbba/dropdown-usage-10f.png",srcSet:["/static/4aeceffecc1342b85006299ead5b1a66/7fc1e/dropdown-usage-10f.png 288w","/static/4aeceffecc1342b85006299ead5b1a66/a5df1/dropdown-usage-10f.png 576w","/static/4aeceffecc1342b85006299ead5b1a66/3cbba/dropdown-usage-10f.png 1152w","/static/4aeceffecc1342b85006299ead5b1a66/92c65/dropdown-usage-10f.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h2",null,"Combo box"),Object(n.b)("p",null,"Allows the the user to make a selection from a predefined list of options and is\ntypically used when there are a large amount of options to choose from."),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"By default, the combo box displays placeholder text in the field when closed."),Object(n.b)("li",{parentName:"ul"},"When hovering over the field, a text cursor appears.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"56.25%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABY0lEQVQoz5VSy2rCQBSdJBRr0U3pqov8QkVpF6Xd9AsK/YTSbxJXhXyAfyAuC+nedhESiY+8NE81CRHSM6kRTSo0Fw5n5s69Z+6dO4QcGM/zh1siCAKRZZnEcUyCINhjs9mQwWBAFotFFud5XuY/ZWdAHeDIP+ykkG3b3I5fcPM38Ok4jogEcbVaFfHhuu4X+JnmgFngV2g8HmeAEEv3CHyE2Ltpml3DMHrL5bKHsyK68AvgB5qDNZvrHFmapqSqlXKgWsshSVINbdajKGqghQYqbKLSpmVZf2I+n19gaDT3PNegggzFaDRicBtTtUKIshBlFEXJdPYH/X4/4+FweC2K4hMuuEelLQyltV6vW/gqh3wThmEH68tS2/lj4i9xu2/whsAUDx0DW7S29X2/iChJkhT8SnPA3GQyOR7KbDbLW7jC4a2qqm2gM51OO/AV0Yb/jsbucjKUTNf1ylPWNO1o/wMb53L8HzLXJQAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Combo box closed enabled and hover states.",title:"Combo box closed enabled and hover states.",src:"/static/82edb68b2e7dcd0ad0bb007f56227795/3cbba/dropdown-usage-11a.png",srcSet:["/static/82edb68b2e7dcd0ad0bb007f56227795/7fc1e/dropdown-usage-11a.png 288w","/static/82edb68b2e7dcd0ad0bb007f56227795/a5df1/dropdown-usage-11a.png 576w","/static/82edb68b2e7dcd0ad0bb007f56227795/3cbba/dropdown-usage-11a.png 1152w","/static/82edb68b2e7dcd0ad0bb007f56227795/92c65/dropdown-usage-11a.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"The menu opens by clicking anywhere in the field and you can start typing to\nsort through the list of options. The options that start to match your entry\nremain in the list while other existing options are temporarily removed."),Object(n.b)("li",{parentName:"ul"},"After typing text in the field, the close (x) icon appears to the right of the\ntext in the field. This clears any text that’s been entered in the field.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"112.15277777777779%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAACXBIWXMAAAsSAAALEgHS3X78AAACdUlEQVQ4y62VS24TQRCGHXcSxSTsWLGCY4QDsGCVLACJAzhOkMXSkg/gVWCHfAxElG0WyBewvDP2+P1+v+15Nn+1ugePZ4yIoKVfNeN0fV1VXTUJhbZWJpMJPXatVqvgPySTSWETicRZKpV6nk6nn3HOI4ZhRObzeWS5XLpaLBYRx3GewDIF7ff7XuBgMGDSfuh0OoPhcFiCtNlspsFRA3RbPyeTSR/2PfnAhnGQFzgajZi0Nzidj8djjk1c13WfEBGnhT0x8qFIm82mF4iQVYQxnM7r9bqBCG1sthHBrnQCYu+VTJnl8/nglAG5hgOfTqcWNjr0HCCTgNjrAguFwp+BSMEClIBB+nsgpUy1w8UYqJGFlC0AhFXC+0YCoz5guVwW6vV6h7KWcdu2Od5F8enZNE1uWZarzUbwOPZ+lLfMFMdd6qVSqbzUNO1ttVq9QJSXuJzLRqOxqwvoXalUekE+YP8GAcBIALJarXb42EkhH/JVHAIe44djsqjDEWp0glRPUcvTbrd7hih9arfbpKeI8gRRHpGvUui/L1CFcHJYXsobpPEDNbxHtN+hOxTdFb2jnb6h+R/w/Jp88B5WHHehRUTbYHbjcqz4vkU3TQsg95Z9Hwc1erAxauxWq6WjjiaiMKmRd7SWoxfdO3oKSJNCs0xNTaMHIA+QmBR8SMSkrNdrViwWvUDUjEl7DThHPSzcpIPaOspuyaSmx14BxBCwbDbr6ycBRCNfAcBxog5rAm7CYVcbAqJtojIrlsvlvED6UdpPsuBi5IIWfS9lyvG9KSMy0TY49RVS+Qp9RiRfkF6QbqE0fM5l/Q98Ecp++ud/Ur8AYvrFwf8lO18AAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Combo box typing and option hover jumping to matched entry in the menu.",title:"Combo box typing and option hover jumping to matched entry in the menu.",src:"/static/f7bf5b4010e07aff1a2551ecf4991516/3cbba/dropdown-usage-11b.png",srcSet:["/static/f7bf5b4010e07aff1a2551ecf4991516/7fc1e/dropdown-usage-11b.png 288w","/static/f7bf5b4010e07aff1a2551ecf4991516/a5df1/dropdown-usage-11b.png 576w","/static/f7bf5b4010e07aff1a2551ecf4991516/3cbba/dropdown-usage-11b.png 1152w","/static/f7bf5b4010e07aff1a2551ecf4991516/92c65/dropdown-usage-11b.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Selecting an option closes the menu and the selected option replaces the\nplaceholder text.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"84.375%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsSAAALEgHS3X78AAACRklEQVQ4y61UuY4TQRAd94hdra2FiIiYeCMC/gOJjEUsSAiWDIEjazNABBaB/8By5uMDLGdOHPqQL/kc3/dtjz2e5lUzY3Z2h8ASJT3VdHW/11Xd1SNJtywej0vH2nq9tp/weDzCu91ul8/nexIMBh8vl0vnXcznc6eu607OuWuxWDwgjqZp0mAwsAqORiOZ/HQ6fVGv1yeVSqWBbwUkBSIH0HgymVSwHsP5V4PDsJlVcDwey4Z/vdvteL/f5yBzVVX5ZrOxeIqTQfgncRCXm82mVRACQhCpX2IhVxRlh9ge5D0yuQuVBLH5d+LgU87n8/8WRAm0WEMZ+mw24xCwALEtCaLsH8TZ7/dyoVCwCmIHIVgsFi9LpRJPJpNauVzWa7WaXq1WLUBsOxwOOdYKwW63KycSCatgo9GQDf+q1+txkNROp7NDxnZY03m22+1vxFmtVnI6nf4jhB0lZEKlCkHs/M44H3EBdoYSubHmF3HQRjKqEloHQ0amf4qWeY/JK5Ryhdt7a4M3rVbrA9Y+My7lrxCIjIAsmVn2MQZhyo6ZOiR4ioxOyeOQT3DDZ3hO52idc2T40A44W8IjZOpCIifENSH9d0N2Arlcjhntc5FKpW4ymcwX9Nsn9OI1mvsAGiP+ERfyGePnxEE1DjwEoXPv6aFxX6KULdIf03vFEcxBOIDGiI/pNQE3Jhff1kyj0ajwXq/XQU8JYNlslvn9fhYOhxn+PiwUCrFAIMDQc4zmI5GIgzixWEzC/P3y8Zc5+sio1Nv2G4Ajq5ABlUsYAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Combo box selected state.",title:"Combo box selected state.",src:"/static/249eeed27e4d4b8d1f512f8bcfded212/3cbba/dropdown-usage-11c.png",srcSet:["/static/249eeed27e4d4b8d1f512f8bcfded212/7fc1e/dropdown-usage-11c.png 288w","/static/249eeed27e4d4b8d1f512f8bcfded212/a5df1/dropdown-usage-11c.png 576w","/static/249eeed27e4d4b8d1f512f8bcfded212/3cbba/dropdown-usage-11c.png 1152w","/static/249eeed27e4d4b8d1f512f8bcfded212/92c65/dropdown-usage-11c.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h2",null,"Modifiers"),Object(n.b)("h4",null,"Inline"),Object(n.b)("p",null,"When placing a dropdown inline with other content use the inline modifier. If\nadding a visual label to an inline dropdown it should appear inline to the left\nof the dropdown. If there is no visual label present you must supply an\nappropriate accessibility label to the inline dropdown. ",Object(n.b)("em",{parentName:"p"},"Note: Inline is only a\nmodifier for dropdown and does not have filtering functionality.")),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"56.25%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABgElEQVQoz62RzU7CUBCF8YVclQQCKyHqu9AV70JoAiHBhD0GLaDBha/Ako0iCxYt/5TClI5zRtqo1J2TnMy9d+Z+c3qbqlQqF6n/jlarddls3pWrVatkWZZZFTUaDbNer/9QrVbTjNpfUmAmkykXCldcLBb49uZalU4bnMvlVPl8nrPZrGbsDcOQejpRCuz1eqWnwSvf2y9++3FA7Ydnsm2b+v0+Se0sd7vdM+G80+mQApnZPB5Dfnv/oK3nhxSEiSF9sZJqvu+HClyv1+bhcGDXdWi73YaeCHmz2WiGpCeczWah67rhfD6Pz9EDeZ6nNQXudjtTJvB+v6fTdP4dGLhcLnmxWPBqteKkkKFfbyh0BUom2I4AuCwuMIGJiMUZi5sYIP0srjkyEAMjhwKhyB4uj8djeQZX19KjzhzH0SEInKGOYYkOhUWnR+fpdMrD4ZBHoxFPJhOFwB3gERAOv39+DJQG8zSRjvK7RdoIKBygMboMIDJ6AMa7BkGge6w/Aenzh+zCMlPKAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Inline dropdown with label in a dashboard.",title:"Inline dropdown with label in a dashboard.",src:"/static/78691f53f70a3df0cb8babc5c87fd5f8/3cbba/dropdown-usage-12.png",srcSet:["/static/78691f53f70a3df0cb8babc5c87fd5f8/7fc1e/dropdown-usage-12.png 288w","/static/78691f53f70a3df0cb8babc5c87fd5f8/a5df1/dropdown-usage-12.png 576w","/static/78691f53f70a3df0cb8babc5c87fd5f8/3cbba/dropdown-usage-12.png 1152w","/static/78691f53f70a3df0cb8babc5c87fd5f8/92c65/dropdown-usage-12.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h4",null,"Light"),Object(n.b)("p",null,"Use the ",Object(n.b)("inlineCode",{parentName:"p"},"light")," prop modifier when using a dropdown on a background other than\nthe UI background for that theme. The light prop changes the background color\ntoken of the dropdown from ",Object(n.b)("inlineCode",{parentName:"p"},"field-01")," to ",Object(n.b)("inlineCode",{parentName:"p"},"field-02"),". This is frequently used in\nform modals and side panels, or when a dropdown sits on top of a tile on a page."),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"66.66666666666666%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABUklEQVQ4y62SS2/CMBCETXPkjrj22L+DuFRKD6g/mUg8jkTJIW/yAglsd8bFVqSkFZVq6dMa785kvUaIx9Jauwhe4jj20jQ1tG3rNU3j4O/z+cz9jBpEgTMxWtb0L4tmkysIAvO17Xb7ttvtPvM8X6G7dZZl667r1uhgyKqu63fEV2oQZ6MOeYVHcoPr6jAMm9Pp1EVR1KOLHgZD6r7vNcKGGkQPfBuVZWnmURSFx9mh0zk6XB6Px8V+v18wousRyC0Ph8OcGmppynmLf19w96uq8tGpi+DjSZwGt/STJPHF7XbTUsoR9/vdMJWbqlVKac6VA5V4CInBm4ivSbywxMsabO4nbJ611NFQ4VDh0ESCa7gzFCp0oHCTEZfLxdTYOhgqGmqINQ4NbBv/PY0X05iJ2V+v1xGsg4nTcQ9D7QwtNjnEiqYYaowhXudXwbPQmIZfufTXQXMwsKwAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Light prop applied to dropdowns in a filter panel.",title:"Light prop applied to dropdowns in a filter panel.",src:"/static/67e937d4e5d47c979affd995dccc5966/3cbba/dropdown-usage-13.png",srcSet:["/static/67e937d4e5d47c979affd995dccc5966/7fc1e/dropdown-usage-13.png 288w","/static/67e937d4e5d47c979affd995dccc5966/a5df1/dropdown-usage-13.png 576w","/static/67e937d4e5d47c979affd995dccc5966/3cbba/dropdown-usage-13.png 1152w","/static/67e937d4e5d47c979affd995dccc5966/92c65/dropdown-usage-13.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h4",null,"Invalid"),Object(n.b)("p",null,"Real time validation helps to streamline the process of filling out a form. We\nhave three indicators of an invalid state: a border, an icon indicator, and an\nerror message. Having text, color, and weight differentiation as invalid\nindicators help meet accessibility requirements. For full guidelines, refer to\nthe ",Object(n.b)("a",s({parentName:"p"},{href:"https://www.carbondesignsystem.com/components/form/usage"}),"form component"),"\nusage page."),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"50%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAABV0lEQVQoz2NgoBWINDED02FAOsnIhOG/qBLDZXkNhptyGgy3ZNGwHAKDADIbDv7//w+ngZjp+Z/fLK///2d5A8TfgfgbFIPYX759Y/kMpD+9fMUI0vMDqOdxbjGmK2GGkgKAhjFilXh44BATmN6zz+XhpctrX965O/f5rdvzX965M//Tk6cLPj56vBCEgeyF7y9cmvf+xs3V746dsAfp+fz2HdPD+DRUA98cPAw28P3+g0GPzpy9+uDUmbP3Tp469+jMuXMf790/AzTs+MeHj45/evr0+PtTZ468vXL1yrvjJ/0gBr7FNHAXlF7LwMAM9DgTELMBMetvIMbn5b/4gukUHo3A8GWERhjD5ydPGR5D+bCwfzlnAaqGBz4hYPq+RwDDw+gkhgdBkQwPQqIZHgRHMzxKzGB4f+Ycw7vDRxneHTkGxccZXq1YA9bz/ux5hgehMbRJzwBlPdmMhVy8jgAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Dropdown invalid state.",title:"Dropdown invalid state.",src:"/static/9b491d9fa848e6a21e0ce4fa1c52f53e/3cbba/dropdown-usage-14.png",srcSet:["/static/9b491d9fa848e6a21e0ce4fa1c52f53e/7fc1e/dropdown-usage-14.png 288w","/static/9b491d9fa848e6a21e0ce4fa1c52f53e/a5df1/dropdown-usage-14.png 576w","/static/9b491d9fa848e6a21e0ce4fa1c52f53e/3cbba/dropdown-usage-14.png 1152w","/static/9b491d9fa848e6a21e0ce4fa1c52f53e/92c65/dropdown-usage-14.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h4",null,"Disabled"),Object(n.b)("p",null,"A dropdown cannot be clicked, selected, or interacted with if it is disabled. It\nis not read by a screen reader and takes on the default disabled visual style.\nTooltips on a disabled state are also not read by screen readers and we\nrecommend having an alternative way to show descriptive text if needed."),Object(n.b)(A,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"50%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAAA6klEQVQoz7VSywqDMBBcg//VU89+YSmee+hXSG5KBSvoTbyKb7wIdjYkofg4tKULwySb7OwjIfqXRVGkOAxDiuOYlmWhruuo73sahuEQbO9rayxgGBBN07ht2yrgsgthxezntYbDMSbpxozoJ2ZEN4bMQvMZuKPdK6rzwT6y+whUzH7wBfsbcNKigqtcZxJ6Hh6EIogGgGTAJ3Eux3EMiqJ41nUdwveAzzOxuy0j4JuW9w+qqrIXsixz0jSlJEkoz3M18GmaqCxLOy9U6szzTIePYjKtvwnvGRiDejQpJXEyXqN1+20OK/3VXjCrEplcGsVtAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Dropdown disabled state.",title:"Dropdown disabled state.",src:"/static/4b851b38cd80a19201babb7faa29024b/3cbba/dropdown-usage-15.png",srcSet:["/static/4b851b38cd80a19201babb7faa29024b/7fc1e/dropdown-usage-15.png 288w","/static/4b851b38cd80a19201babb7faa29024b/a5df1/dropdown-usage-15.png 576w","/static/4b851b38cd80a19201babb7faa29024b/3cbba/dropdown-usage-15.png 1152w","/static/4b851b38cd80a19201babb7faa29024b/92c65/dropdown-usage-15.png 1216w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("h2",null,"Related"),Object(n.b)("h4",null,"Dropdown versus Select"),Object(n.b)("p",null,"Dropdown and select components have functionality and style differences."),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"The underlying code of a dropdown component is styled to match the design\nsystem, while the select component’s appearance is determined by the browser\nbeing used."),Object(n.b)("li",{parentName:"ul"},"Use a dropdown component in forms, to select multiple options at a time and to\nfilter or sort content on a page. The select dropdown does not have filtering\nor multiselect functionality."),Object(n.b)("li",{parentName:"ul"},"Use a select dropdown component if most of your experience is form based.\nCustom dropdowns can be used in these situations, but the native select works\nmore easily with a native form when submitting data."),Object(n.b)("li",{parentName:"ul"},"Use a select dropdown component if your experience will be frequently used on\nmobile. The native select dropdown uses the native control for the platform\nwhich makes it easier to use.")),Object(n.b)("h4",null,"Dropdown versus Combo box"),Object(n.b)("p",null,"While the dropdown and combo box look similar they have different functions."),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"With a dropdown list, the selected option is always visible, and the other\noptions are visible by clicking and opening the list."),Object(n.b)("li",{parentName:"ul"},"A combo box is a combination of a standard list box or a dropdown list and an\neditable text box and users are able to enter a value that isn’t in the list.")),Object(n.b)("h2",null,"References"),Object(n.b)("p",null,"Angie Li,\n",Object(n.b)("a",s({parentName:"p"},{href:"https://www.nngroup.com/articles/drop-down-menus/"}),"Dropdown: Design Guidelines"),"\n(Nielsen Norman Group, 2017)"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},Object(n.b)("a",s({parentName:"li"},{href:"https://www.carbondesignsystem.com/components/checkbox/code"}),"Checkbox")),Object(n.b)("li",{parentName:"ul"},Object(n.b)("a",s({parentName:"li"},{href:"https://www.carbondesignsystem.com/components/form/code"}),"Form")),Object(n.b)("li",{parentName:"ul"},Object(n.b)("a",s({parentName:"li"},{href:"https://www.carbondesignsystem.com/components/radio-button/code"}),"Radio button")),Object(n.b)("li",{parentName:"ul"},Object(n.b)("a",s({parentName:"li"},{href:"https://www.carbondesignsystem.com/components/select/code"}),"Select"))),Object(n.b)("h2",null,"Feedback"),Object(n.b)("p",null,"Help us improve this pattern by providing feedback, asking questions, and\nleaving any other comments on\n",Object(n.b)("a",s({parentName:"p"},{href:"https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md"}),"GitHub"),"."))}O.isMDXComponent=!0}}]);