');content:"";width:10px;height:10px;display:inline-block}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--wrapper{width:100%;float:left;margin:0;padding:0}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--duplicate-content,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--subcategory-inline{display:none!important}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title{margin:0;color:#458ee1;font-size:.9em;font-weight:400}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title:before{content:"#";font-weight:700;color:#458ee1;display:inline-block}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text{margin:4px 0 0;display:block;line-height:1.4em;padding:5.33333px 8px;background:#f8f8f8;font-size:.85em;opacity:.8}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{color:#3f4145;font-weight:700;box-shadow:none}.algolia-autocomplete .algolia-docsearch-footer{width:134px;height:20px;z-index:2000;margin-top:10.66667px;float:right;font-size:0;line-height:0}.algolia-autocomplete .algolia-docsearch-footer--logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='168' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938zm41.937 17.866c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17z' fill='%235468FF'/%3E%3Cpath d='M6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z' fill='%235D6494'/%3E%3Cpath d='M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:100%;overflow:hidden;text-indent:-9000px;padding:0!important;width:100%;height:100%;display:block}.bx--text-truncate--end,.bx--text-truncate--front{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bx--text-truncate--front{direction:rtl}div[class*=page-header]{--height:15rem}.paragraph{font-size:1rem;font-weight:400;line-height:1.5rem;letter-spacing:0;margin-bottom:1.5rem;padding-right:2rem}.paragraph--responsive{margin-left:-1rem;padding-left:1rem}@media (min-width:42rem){.paragraph--responsive{width:75%}}@media (min-width:66rem){.paragraph--responsive{width:66.667%}}.list,.page-h1,.page-h2,.page-h3,.page-h4,.page-h5,.page-h6{width:100%}@media (min-width:42rem){.list,.page-h1,.page-h2,.page-h3,.page-h4,.page-h5,.page-h6{width:75%}}@media (min-width:66rem){.list,.page-h1,.page-h2,.page-h3,.page-h4,.page-h5,.page-h6{width:66.667%}}.page-h1{margin-top:6rem;margin-bottom:1rem;font-size:2rem;font-weight:400;line-height:125%;letter-spacing:0;font-size:calc(2rem + 0.25*(100vw - 20rem)/22)}@media (min-width:42rem){.page-h1{font-size:2.25rem;line-height:122%;font-size:calc(2.25rem + 0.375*(100vw - 42rem)/24)}}@media (min-width:66rem){.page-h1{font-size:2.625rem;line-height:119%;font-size:calc(2.625rem + 0.375*(100vw - 66rem)/16)}}@media (min-width:82rem){.page-h1{font-size:3rem;line-height:117%;font-size:calc(3rem + 0.75*(100vw - 82rem)/17)}}@media (min-width:99rem){.page-h1{font-size:3.75rem}}.page-h2{margin-top:5rem;margin-bottom:1rem;font-size:1.75rem;font-weight:400;line-height:129%;letter-spacing:0;font-size:calc(1.75rem + 0*(100vw - 20rem)/62)}@media (min-width:82rem){.page-h2{font-size:1.75rem;line-height:125%;font-size:calc(1.75rem + 0.25*(100vw - 82rem)/17)}}@media (min-width:99rem){.page-h2{font-size:2rem}}.page-h3{margin-top:4rem;margin-bottom:1rem;font-size:1.25rem;font-weight:400;line-height:130%;letter-spacing:0;font-size:calc(1.25rem + 0*(100vw - 20rem)/62)}@media (min-width:82rem){.page-h3{font-size:1.25rem;line-height:125%;font-size:calc(1.25rem + 0.25*(100vw - 82rem)/17)}}@media (min-width:99rem){.page-h3{font-size:1.5rem}}.page-h4{font-size:1rem;line-height:1.375rem;letter-spacing:0}.page-h4,.page-h5,.page-h6{margin-top:.75rem;font-weight:600}.page-h5,.page-h6{font-size:.875rem;line-height:1.125rem;letter-spacing:.16px}.container .gatsby-resp-image-wrapper,.container img[src*=gif],.container img[src*=svg]{background:#fff}.bx--resource-card .gatsby-resp-image-wrapper,.bx--resource-card img[src*=gif],.bx--resource-card img[src*=svg]{background:transparent}.image--fixed{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff}.image--fixed span.gatsby-resp-image-wrapper{background:#fff;display:flex!important;align-items:center;justify-content:center;margin-right:0!important;width:70%!important;max-width:100%!important}.image--fixed img.gatsby-resp-image-image{max-width:736px;width:736px!important;height:auto!important;position:relative!important}.homepage--dots{position:fixed;z-index:1;width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16' xml:space='preserve'%3E%3Crect width='16' fill='none' height='16'/%3E%3Crect x='0' y='0' fill='white' width='1' height='1'/%3E%3C/svg%3E");background-size:16px;opacity:.35}.container--homepage div[class*=Callout-module--grid],.container--homepage div[class*=Main-module--main],.container--homepage div[class*=NextPrevious-module--wrapper]{position:relative;z-index:2}.homepage--header{height:0;overflow:hidden;padding-top:100%;position:relative}@media (min-width:42rem){.homepage--header{padding-top:50%}}@media (min-width:66rem){.homepage--header{padding:0;height:560px}}.homepage--header .bx--grid,.homepage--header .bx--row{height:100%}.homepage--tile-header{display:flex;align-items:flex-end;margin-top:-50%;padding-left:0;padding-right:0}@media (min-width:42rem){.homepage--tile-header{padding-left:1rem;padding-right:1rem}}@media (min-width:66rem){.homepage--tile-header{margin-top:0}}.homepage--tile-header .bx--aspect-ratio--2x1{padding-bottom:100%}@media (min-width:42rem){.homepage--tile-header .bx--aspect-ratio--2x1{padding-bottom:50%}}.homepage--tile-header .bx--resource-card{width:100%}.homepage-feature{margin-top:3rem}.homepage-feature .bx--feature-card__img{padding-bottom:50%}@media (min-width:42rem){.homepage-feature .bx--feature-card__img{padding-bottom:0}}.bx--header .algolia-autocomplete{height:3rem}.bx--header .algolia-autocomplete .ds-dropdown-menu{margin-top:0}.component-example .bx--link,.page-content .bx--breadcrumb .bx--link{font-size:.875rem}.component-example .button .bx--btn{margin:.5rem}.component-example__live.component-example__live--notification .component-example__live--rendered>div{display:flex;flex-direction:column;align-items:flex-start}.component-example .bx--inline-notification{display:inline-flex}.component-example .loading .bx--loading-overlay{position:absolute}.component-example .bx--form-item,.component-example__live .bx--form-item{margin-bottom:2rem}.component-example .bx--form-item.bx--checkbox-wrapper{margin-bottom:.5rem}.component-example__live--tabs .bx--tabs__nav{position:static}.component-example__live .tabs .bx--tabs+div{margin-top:2rem}.component-example__live--tile .bx--grid{outline:1px dashed #97c1ff}.component-example__live--tile .bx--tile-container .bx--col{background:none;margin-bottom:1rem}.component-example .flatpickr-calendar{margin-left:-1rem;margin-top:-1rem}.component-example__live .bx--tooltip{margin-left:-1rem;margin-top:-.5rem}.component-example__live.component-example__live--modal .bx--modal{z-index:10000}.component-example__live .bx--progress .bx--tooltip{margin-left:1.375rem;margin-top:2.5rem}.code-example{display:flex;flex-direction:column;position:relative;max-width:100%;background:#171717}.code-example code[class*=language-],.code-example pre[class*=language-]{background:#171717;color:#fff}.code-example code[class*=language-]{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.32px}.code-example pre[class*=language-]{padding-top:0;border:none;box-shadow:none}.code-example__copy-btn{height:2rem;width:2rem;position:absolute;top:.5rem;right:.5rem;color:transparent;cursor:pointer;z-index:20;background:#171717;-webkit-transition:background .11s;transition:background .11s}.code-example__copy-btn:hover{background:#353535}.code-example__copy-btn:focus{outline:1px solid #0062ff;background:#171717}.code-example__copy-btn:hover svg{fill:#fff}.code-example__copy-btn svg{position:absolute;top:.5rem;left:.5rem;fill:#fff}.code-title{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.32px;display:block;margin-bottom:1rem}.code-example__raw-html{background:#171717;color:#fff;margin:0 1rem;padding:1rem 0;max-height:12rem;min-height:7rem;height:auto;display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden;scrollbar-width:none;-webkit-transition:.11s;transition:.11s;border-bottom:1px solid #3d3d3d}.code-example__raw-html--expanded{max-height:100rem}.code-example__expand-container{display:flex;justify-content:flex-end;height:3rem;width:100%;background-color:#171717}.code-example__expand{color:#fff;background-color:#171717;border:none;padding:1rem 1rem 1.125rem;display:flex;align-items:center;cursor:pointer}.code-example__expand:focus{outline:1px solid #0062ff;outline-offset:-1px}.code-example__expand:hover span{border-bottom:1px solid #fff}.code-example__expand span{font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px;display:inline-block;line-height:1;border-bottom:1px solid transparent;-webkit-transition:border .11s;transition:border .11s}.code-example__expand--icon{margin-left:.5rem;fill:#fff;-webkit-transition:.11s;transition:.11s}.code-example__expand--icon--rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.code-example__expand--hidden{display:none}.code-example .token{white-space:nowrap}.code-example .token:last-of-type{margin-right:0}.color-block{position:relative;font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px}.color-block__color{position:relative;display:block;margin-top:.125rem;height:.875rem;width:.875rem;border-radius:.875rem}.color-block__color:before{position:absolute;content:"";height:.875rem;width:.875rem;border-radius:.875rem;border:1px solid #dcdcdc;left:-1px;top:-1px}.color-block__color--with-label{position:absolute;top:0;left:5rem}.color-blocks .bx--caption{margin-left:1rem}.color-blocks .bx--col-lg-2{padding-right:0;padding-left:0}.color-blocks .bx--col-lg-2:nth-child(2){margin-right:40%}@media (min-width:42rem){.color-blocks .bx--col-lg-2:nth-child(2){margin-right:0}}@media (min-width:42rem){.color-blocks .bx--col-lg-2:nth-child(3){margin-left:2rem}}.color-square{padding:1rem}.color-square--white{background:#fff}.color-square--gray-10{background:#f3f3f3;outline:1px solid #bebebe;outline-offset:-1px}.color-square--gray-100{background:#171717}.color-square--gray-90{background:#282828}.color-square--gray-80{background:#3d3d3d}.color-square--gray-80,.color-square--gray-90,.color-square--gray-100{color:#fff}.color-grid{display:grid;grid-template-columns:repeat(6,1fr)}@media (min-width:42rem){.color-grid{grid-template-columns:repeat(12,1fr)}}.color-grid__swatch:before{content:"";display:block;height:0;padding-bottom:100%}.color-token-table{display:flex;flex-direction:column}.color-token-table__theme-switcher{position:relative;width:100%;height:3rem;margin-bottom:1.75rem;background:#fff}.color-token-table__theme-switcher:before{content:"";display:block;position:absolute;top:-16px;left:0;width:110%;height:64px;background:#f3f3f3}.color-token-table__theme-switcher--sticky{position:fixed;top:112px;z-index:9999;max-width:1164px;box-shadow:0 2px 6px 0 rgba(0,0,0,.2)}@media (max-width:1580px){.color-token-table__theme-switcher--sticky{max-width:73.35%}}@media (max-width:1380px){.color-token-table__theme-switcher--sticky{max-width:73.1%}}@media (max-width:1280px){.color-token-table__theme-switcher--sticky{max-width:72.98%}}@media (max-width:1055px){.color-token-table__theme-switcher--sticky{max-width:calc(100% - 32px)}}@media (max-width:671px){.color-token-table__theme-switcher--sticky{max-width:100%}}h3.page-h3--sticky{margin-top:100px!important}.color-token-table__theme-switcher .bx--content-switcher-btn:not(.bx--content-switcher--selected){background-color:#fff;color:#171717}.color-token-table__theme-switcher .bx--content-switcher-btn:not(.bx--content-switcher--selected):hover{background-color:#e5e5e5}.color-token-table__theme-switcher .bx--content-switcher-btn{flex:1 1;border-radius:0;height:3rem;padding:.5rem 1rem}@media (min-width:42rem){.color-token-table__theme-switcher .bx--content-switcher-btn{padding-right:4rem}}.color-token-table__theme-switcher .bx--content-switcher-btn:not(:last-of-type):after{height:24px;right:-1px;top:12px}.color-token-value{display:flex;justify-content:space-between}.color-token-value .bx--overflow-menu{margin-left:.5rem}.color-token-value .bx--overflow-menu-options{left:-9.25rem;top:2rem}.color-token-value .bx--overflow-menu__icon{width:.75rem;height:.75rem}.color-token-value>div{display:flex}@media (max-width:580px){.color-token-value>div{position:absolute;right:1rem;top:1rem}}.color-token-value__block{display:block;width:3rem;height:3rem;border-radius:3rem}@media (max-width:672px){.color-token-value__block{width:2rem;height:2rem;border-radius:2rem}}@media (max-width:580px){.color-token-value__block{width:3rem;height:3rem;border-radius:3rem}}.color-token-table .page-table{background:#fff;margin-top:.5rem;width:100%}.color-token-table .page-table thead tr{border-bottom:1px solid #dcdcdc;display:flex}@media (max-width:580px){.color-token-table .page-table thead tr{display:none}}.color-token-table .page-table thead tr th{flex:1 1;flex-basis:33.33333%}.color-token-table .page-table tbody tr{display:flex;border-bottom:1px solid #dcdcdc;min-height:6.5rem}@media (max-width:580px){.color-token-table .page-table tbody tr{flex-direction:column;height:auto;position:relative}}.color-token-table .page-table tbody tr:last-child{border-bottom:none}.color-token-table .page-table tbody tr td{flex:1 1;flex-basis:33.33333%}.color-token-table .page-table tbody tr td:last-child{padding-right:.5rem}.color-token-table .page-table tbody tr td:not(:last-child){border-right:1px solid #dcdcdc}.component-docs table{display:block;max-width:calc(100% + 2rem);overflow-x:scroll}@media (min-width:42rem){.component-docs table{overflow-x:visible}}.component-docs>h2+div>h3:first-child,.component-docs>h2+div>h4:first-child{padding-top:0!important}body .component-docs pre{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.32px;overflow-x:scroll;scrollbar-width:none;background:#171717;padding:.5rem 3rem .5rem 1rem!important;margin-bottom:1.5rem!important;margin-left:-1rem;margin-right:-1rem;border-radius:0;color:#fff}body .component-docs code[class*=language-]{background:transparent}.component-docs h1{display:none}.component-docs .token:last-of-type{margin-right:0}.component-docs h2{margin-top:5rem;margin-bottom:1rem;font-size:1.75rem;font-weight:400;line-height:129%;letter-spacing:0;font-size:calc(1.75rem + 0*(100vw - 20rem)/62)}@media (min-width:82rem){.component-docs h2{font-size:1.75rem;line-height:125%;font-size:calc(1.75rem + 0.25*(100vw - 82rem)/17)}}@media (min-width:99rem){.component-docs h2{font-size:2rem}}.component-docs h3{margin-top:4rem;margin-bottom:1rem;font-size:1.25rem;font-weight:400;line-height:130%;letter-spacing:0;font-size:calc(1.25rem + 0*(100vw - 20rem)/62)}@media (min-width:82rem){.component-docs h3{font-size:1.25rem;line-height:125%;font-size:calc(1.25rem + 0.25*(100vw - 82rem)/17)}}@media (min-width:99rem){.component-docs h3{font-size:1.5rem}}.component-docs h4{margin-top:.75rem;font-size:1rem;font-weight:600;line-height:1.375rem;letter-spacing:0}.component-docs h5,.component-docs h6{margin-top:.75rem;font-size:.875rem;font-weight:600;line-height:1.125rem;letter-spacing:.16px}.component-example{width:100%;max-width:100%;display:block;color:#fff;margin-bottom:1.5rem}.page-content>div>div:first-child .component-example__heading-label{padding-bottom:1.5rem}.component-example__live{display:flex;align-items:center;justify-content:center;width:100%;min-height:12.5rem;position:relative;padding:2rem 2rem 2.5rem;margin:0;background-color:#fff;color:#171717;border:1rem solid #fff}.component-example__live.component-example__live--light{background-color:#f3f3f3}.component-example__live.component-example__live--rendered{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;width:100%}.component-example__view-full-render{position:absolute;right:0;bottom:0;color:#565656;font-size:.75rem;font-weight:400;line-height:1rem;letter-spacing:.32px;padding:.5rem 1rem;z-index:9999}.component-example__view-full-render--react{z-index:9099}.component-toolbar{font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px;display:flex;align-items:center;height:3rem;background:#171717;color:#fff;border-bottom:1px solid #3d3d3d;scrollbar-width:0}.component-toolbar__current{height:100%;display:flex;align-items:center;white-space:nowrap;padding:0 1rem}.component-toolbar__links{display:flex;align-items:center;justify-content:flex-start;scrollbar-width:none;overflow-x:scroll;margin-right:1rem}.component-toolbar__links a{position:relative;top:1px;margin-left:1rem;color:#6ea6ff;text-decoration:none;border-bottom:1px solid transparent;white-space:nowrap}.component-toolbar__links a:hover{border-bottom:1px solid #6ea6ff}.component-toolbar__links svg{fill:#6ea6ff;position:relative;top:3px;margin-top:-2px;margin-left:.25rem}@media (min-width:42rem){.component-toolbar__links{overflow-x:visible}}.component-toolbar__switcher{display:flex;align-items:center;border-left:1px solid #3d3d3d;height:100%;padding-left:1rem;padding-right:1rem}.component-toolbar__switcher .bx--form-item{margin-right:0;margin-bottom:0}.component-toolbar__switcher .bx--radio-button__label{font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px;color:#fff}.component-toolbar__switcher .bx--radio-button-group{margin-top:0}.component-toolbar__switcher .radioButtonWrapper:last-child{padding-left:1rem}.component-toolbar__switcher .bx--radio-button__appearance{background-color:transparent;border-color:#fff}.component-toolbar__switcher .bx--radio-button:checked+.bx--radio-button__label .bx--radio-button__appearance{border-color:#fff}.component-toolbar__switcher .bx--radio-button:checked+.bx--radio-button__label .bx--radio-button__appearance:before{background-color:#fff}.component-overview{padding:0;margin:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-start}.component-item{width:33%;background:#fff;position:relative;-webkit-transition:.11s;transition:.11s;width:100%;border-bottom:1px solid #dcdcdc}.component-item:hover{background:#e5e5e5}.component-item:active{background:#bebebe}.component-item:last-child{border:none}@media (min-width:42rem){.component-item{width:50%;border-right:1px solid #dcdcdc}.component-item:nth-child(2n+2){border-right:none}.component-item:last-child,.component-item:nth-last-child(2){border-bottom:none}.component-item:last-child{border-right:none}}@media (min-width:66rem){.component-item{width:33.33%}.component-item:nth-child(2n+2){border-right:1px solid #dcdcdc}.component-item:nth-child(3n+3){border-right:none}.component-item:last-child,.component-item:nth-last-child(2),.component-item:nth-last-child(3){border-bottom:none}.component-item:last-child{border-right:none}}@media (min-width:82rem){.component-item{width:25%}.component-item:nth-child(3n+3){border-right:1px solid #dcdcdc}.component-item:nth-child(4n+4){border-right:none}.component-item:last-child,.component-item:nth-last-child(2),.component-item:nth-last-child(3),.component-item:nth-last-child(4){border-bottom:none}.component-item:last-child{border-right:none}}.component-item__link{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.component-item__img{margin:0;display:block}.component-name{font-size:.75rem;font-weight:400;line-height:1rem;letter-spacing:.32px;color:#171717;text-decoration:none;text-align:left;display:flex;position:absolute;top:1rem;left:1rem}.component-status .bx--tag{white-space:nowrap}.component-status .page-table td{padding:.75rem 1rem}.component-status__key{margin-top:5rem}.component-status__key .page-h4{margin-bottom:1.5rem}.component-status--unavailable{padding-left:.75rem}.glossary-entry{padding-top:2.25rem}.glossary-entry__main-heading{margin-bottom:1.5rem}.glossary-entry__main-heading span{text-transform:lowercase}.glossary-entry__subtext{font-size:1rem;font-weight:400;line-height:1.375rem;letter-spacing:0;color:#565656;font-style:italic;margin-top:.25rem}.glossary-nav{position:absolute;right:1.5rem;display:none;flex-direction:column;align-items:center;justify-content:flex-start;line-height:1.5;padding:10rem 0 0}@media (min-width:66rem){.glossary-nav{display:flex}}.glossary-nav--fixed{position:fixed;top:0}.glossary .bx--list__item{list-style-type:none!important;padding:0;width:100%;-webkit-transition:all .11s;transition:all .11s;display:block}.glossary .bx--list__item a{font-size:1rem;font-weight:400;line-height:1.375rem;letter-spacing:0;width:1.5rem;height:1.5rem;padding:.0625rem 0 0;display:block;text-align:center;text-decoration:none;color:#565656}.glossary .bx--list__item:hover a{color:#171717;background:#e5e5e5}.glossary .bx--list__item.glossary-nav__item--active a{color:#171717;background:#dcdcdc}.typography-table{background:#fff;border-bottom:.0625rem solid #dcdcdc}.typography-table table tbody tr{border:none}.typography-table table thead th{font-size:.75rem;font-weight:400;line-height:1rem;letter-spacing:.32px;border:none;color:#8c8c8c;padding:1rem 0;text-align:left}.typography-table table tbody td{white-space:nowrap;border:none;padding-bottom:auto;color:#171717;vertical-align:top}.typography-table table tbody td:first-child{font-size:.75rem;padding:0 3rem 0 0}@media (min-width:42rem){.typography-table table tbody td:first-child{padding-right:7rem}}@media (min-width:66rem){.typography-table table tbody td:first-child{padding-right:2rem}}@media (min-width:82rem){.typography-table table tbody td:first-child{padding-right:3rem}}.typography-table table tbody tr:first-child td:nth-child(2){font-size:.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(2) td:nth-child(2){font-size:.875rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(3) td:nth-child(2){font-size:1rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(4) td:nth-child(2){font-size:1.125rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(5) td:nth-child(2){font-size:1.25rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(6) td:nth-child(2){font-size:1.5rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(7) td:nth-child(2){font-size:1.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(8) td:nth-child(2){font-size:2rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(9) td:nth-child(2){font-size:2.25rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(10) td:nth-child(2){font-size:2.625rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(11) td:nth-child(2){font-size:3rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(12) td:nth-child(2){font-size:3.375rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(13) td:nth-child(2){font-size:3.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(14) td:nth-child(2){font-size:4.25rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(15) td:nth-child(2){font-size:4.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(16) td:nth-child(2){font-size:5.25rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(17) td:nth-child(2){font-size:5.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:first-child td:first-child{padding-bottom:.36rem}.typography-table table tbody tr:nth-child(2) td:first-child{padding-bottom:.38rem}.typography-table table tbody tr:nth-child(3) td:first-child{padding-bottom:.6rem}.typography-table table tbody tr:nth-child(4) td:first-child{padding-bottom:.74rem}.typography-table table tbody tr:nth-child(5) td:first-child{padding-bottom:1rem}.typography-table table tbody tr:nth-child(6) td:first-child{padding-bottom:1.4rem}.typography-table table tbody tr:nth-child(7) td:first-child{padding-bottom:1.625rem}.typography-table table tbody tr:nth-child(8) td:first-child{padding-bottom:2rem}.typography-table table tbody tr:nth-child(9) td:first-child{padding-bottom:2.5rem}.typography-table table tbody tr:nth-child(10) td:first-child{padding-bottom:3rem}.typography-table table tbody tr:nth-child(11) td:first-child{padding-bottom:3.5rem}.typography-table table tbody tr:nth-child(12) td:first-child,.typography-table table tbody tr:nth-child(13) td:first-child{padding-bottom:4rem}.typography-table table tbody tr:nth-child(14) td:first-child{padding-bottom:4.5rem}.typography-table table tbody tr:nth-child(15) td:first-child{padding-bottom:5rem}.typography-table table tbody tr:nth-child(16) td:first-child{padding-bottom:5.5rem}.typography-table table tbody tr:nth-child(17) td:nth-child(2){padding-bottom:2rem}.type-weight{background:#fff;padding:1rem;margin-bottom:1.5rem}.type-weight p{font-size:3rem;padding:0;line-height:1.25;color:#171717}.type-weight .bx--type-italic{font-style:italic}.type-weight .bx--type-semibold{font-weight:600}.type-weight .bx--type-regular{font-weight:400}.type-weight .bx--type-light{font-weight:300}.homepage-video--main{width:180%;height:100%;position:absolute;top:0;right:0}@media (min-width:42rem){.homepage-video--main{width:100%}}.homepage-video--wrapper{width:100%;height:100%;position:absolute;top:0;right:0;padding-bottom:56.25%}.homepage-video--wrapper iframe{position:absolute;top:-20%;right:0}@media (max-width:1260px){.homepage-video--wrapper iframe{top:-10%}}@media (max-width:1100px){.homepage-video--wrapper iframe{top:0}}.homepage--video--overlay{position:absolute;width:100%;height:100%;top:0;left:0;background:#000;opacity:.6}.homepage-video--controls{position:absolute;bottom:.875rem;left:1rem;height:1.5rem;width:1.5rem;background:transparent;outline:none;border:none;padding:0;z-index:10}@media (min-width:66rem){.homepage-video--controls{left:271px}}.homepage-video--controls:focus{outline:2px solid #0062ff;outline-offset:-2px}.homepage-video--controls .mouseIn,.homepage-video--controls .mouseOut{fill:#fff}.homepage-video--controls .cls-1{fill:none}.bx--typeset-style-container{position:relative;padding:0 .5rem;margin-bottom:3rem}@media (min-width:42rem){.bx--typeset-style-container{padding:0;left:0;margin-right:0}}@media (min-width:66rem){.bx--typeset-style-container{margin-top:0;left:.5rem;margin-right:.5rem}}.bx--typeset-style-container .page-h4{margin-top:3rem;display:inline-block}.bx--typeset-style-container .page-h4:before{display:none}.bx--typeset-style-container .page-h4:first-letter{text-transform:uppercase}.bx--typeset-style-button{background-color:transparent;border:none;border-radius:0;height:100%;margin:0;padding:0 1rem;text-transform:capitalize;z-index:4}.bx--typeset-style-button:hover{background-color:#dcdcdc}.bx--typeset-style-button.selected{background-color:#171717;color:#f3f3f3}.bx--typeset-style-button.selected:hover{background-color:#171717}.bx--typeset-style-button:focus{outline:2px solid #0062ff;outline-offset:0;position:relative}.bx--typeset-style-controls{height:100%;left:0;position:absolute!important;top:0;width:100vw}@media (min-width:42rem){.bx--typeset-style-controls{margin-left:0;width:100%}}.bx--typeset-style-controls-sticky{align-items:center;background-color:#fff;width:auto;z-index:2;box-sizing:content-box}.bx--typeset-style-controls-sticky-stuck{box-shadow:0 2px 6px 0 rgba(0,0,0,.2)}.bx--typeset-style-controls-sticky-stuck:after,.bx--typeset-style-controls-sticky-stuck:before{content:"";position:absolute;background:#f3f3f3;height:6rem;width:1rem}@media (min-width:42rem){.bx--typeset-style-controls-sticky-stuck:after,.bx--typeset-style-controls-sticky-stuck:before{height:4rem}}.bx--typeset-style-controls-sticky-stuck:before{left:-2rem}.bx--typeset-style-controls-sticky-stuck:after{right:-2rem}.bx--typeset-style-nav-shiv{width:100%;height:1rem}.bx--typeset-style-breakpoint-controls{height:3rem;align-items:center;display:flex;overflow-x:auto;white-space:nowrap;padding-left:1rem;padding-right:0;width:100%}@media (min-width:42rem){.bx--typeset-style-breakpoint-controls{width:62.5%}}@media (min-width:66rem){.bx--typeset-style-breakpoint-controls{width:50%}}.bx--typeset-style-screen-width-label{padding-right:1rem;display:inline-block}.bx--typeset-style-screen-controls{align-items:center;height:3rem;border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;padding-left:1rem;padding-right:1rem;display:grid;grid-template-columns:auto 1fr auto;width:100%}@media (min-width:42rem){.bx--typeset-style-screen-controls{border-top:none;border-bottom:none;border-left:1px solid #dcdcdc;width:37.5%}}@media (min-width:66rem){.bx--typeset-style-screen-controls{width:50%}}.bx--typeset-style-screen-label{height:auto;margin-bottom:0;min-width:3.4rem;text-align:right}.bx--typeset-style-input{margin:0 1.25rem 0 0;width:100%}.bx--typeset-style-toggle-container{position:relative;z-index:1}.bx--typeset-style-toggle-button{background-color:#fff;box-shadow:inset 0 -1px 0 0 #dcdcdc;color:#171717;border:none;cursor:pointer;margin:0;height:3rem}.bx--typeset-style-toggle-button input{margin:0;visibility:hidden;width:0}.bx--typeset-style-toggle-button.checked{background-color:#171717;color:#fff}.bx--typeset-style-toggle-button.checked:hover{background-color:#171717}.bx--typeset-style-toggle-button:hover{background-color:#dcdcdc}.bx--typeset-style-button-controls-container{height:100%;margin-left:auto}.bx--typeset-style-breakpoints-container{position:relative;margin-top:1rem}@media (min-width:42rem){.bx--typeset-style-breakpoints-container{margin-top:0}}.bx--typeset-style-section-spacer{margin-bottom:calc(1rem + 1px)}.bx--typeset-style-title-shiv{padding-top:1rem;background-color:#f3f3f3;position:relative}.bx--typeset-style-group-title-container{background-color:#fff;height:3rem;padding:1rem;border-bottom:1px solid #dcdcdc;display:flex;flex-direction:row;align-content:center}.bx--typeset-style-group-title{margin:0;padding:0}.bx--input-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:0;position:relative;cursor:pointer;padding-top:.5rem;padding-bottom:.5rem;width:100%}@supports (-ms-ime-align:auto){.bx--input-range{padding-top:0;padding-bottom:0}}.bx--input-range::-webkit-slider-runnable-track{background:#dcdcdc;height:.0625rem}.bx--input-range::-moz-range-track{background:#dcdcdc;height:.0625rem}.bx--input-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#000;border:0;border-radius:100%;height:.875rem;margin-top:-.4375rem;width:.875rem;-webkit-transition-property:height,width,margin;transition-property:height,width,margin;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:cubic-bezier(.2,0,.38,.9);transition-timing-function:cubic-bezier(.2,0,.38,.9)}.bx--input-range::-moz-range-thumb{-moz-appearance:none;appearance:none;background:#000;border:0;border-radius:100%;height:.875rem;margin-top:-.4375rem;width:.875rem;-webkit-transition-property:height,width,margin;transition-property:height,width,margin;transition-duration:.1s;transition-timing-function:cubic-bezier(.2,0,.38,.9)}.bx--input-range::-ms-track{background:transparent;border-color:transparent;border-width:.875rem 0;color:transparent;height:.0625rem}.bx--input-range::-ms-fill-lower,.bx--input-range::-ms-fill-upper{background:#000}.bx--input-range::-ms-thumb{appearance:none;background:#000;border-radius:100%;border:0;height:.875rem;margin-top:-.0625rem;width:.875rem}.bx--input-range:after{background:#000;content:"";position:absolute;height:.0625rem;width:var(--track-width)}.bx--input-range:active::-webkit-slider-thumb,.bx--input-range:hover::-webkit-slider-thumb{margin-top:-.5625rem;width:1.125rem;height:1.125rem}.bx--input-range:active::-moz-range-thumb,.bx--input-range:hover::-moz-range-thumb{margin-top:-.5625rem;width:1.125rem;height:1.125rem}.bx--input-range:active::-ms-thumb,.bx--input-range:hover::-ms-thumb{margin-top:-.125rem;width:1.125rem;height:1.125rem}.bx--input-range:focus{outline:2px solid #0062ff;outline-offset:0}.bx--sticky-container{position:-webkit-sticky;position:sticky;z-index:5;top:0;-webkit-transition-property:top;transition-property:top;-webkit-transition-duration:.24s;transition-duration:.24s;-webkit-transition-timing-function:cubic-bezier(.2,0,.38,.9);transition-timing-function:cubic-bezier(.2,0,.38,.9);margin-left:-.5rem;margin-right:-.5rem}@media (min-width:42rem){.bx--sticky-container{margin-left:0;margin-right:0}}div[class*=PageHeader-module--page-header--shifted]+div>div>.bx--sticky-container-visible{top:3rem}.bx--sticky-container-visible{top:6rem}.bx--sticky-container-hidden.bx--sticky-container-banner{top:2.5rem}.bx--sticky-container-secondary{z-index:4}.bx--sticky-container-secondary-hidden{top:3rem}.bx--sticky-container-secondary-hidden.bx--sticky-container-banner{top:5.5rem}.bx--sticky-container-secondary-visible{top:6rem}.bx--sticky-container-secondary-visible.bx--sticky-container-banner{top:8.5rem}.bx--typeset-example-container{margin-top:1rem}.bx--typeset-example{margin-top:1rem;margin-left:-.5rem;margin-right:-.5rem}@media (min-width:42rem){.bx--typeset-example{margin-left:0;margin-right:0}}.bx--typeset-example-row{background-color:#fff;min-height:13.5rem}.bx--typeset-example-group-title{background-color:#dcdcdc;height:4rem}.bx--typeset-example-description{padding:1rem;overflow:hidden}@media (min-width:42rem){.bx--typeset-example-description{width:62.5%;padding-right:15%}}@media (min-width:66rem){.bx--typeset-example-description{width:66.7%}}.bx--typeset-example-specs{padding:1rem 1.5rem}@media (min-width:42rem){.bx--typeset-example-specs{width:33.3%;border-left:1px solid #dcdcdc}}.bx--typeset-example-specs-text{margin-bottom:.5rem}.bx--typeset-example-code-style{display:block;margin-top:.5rem}.PageHeader-module--bx--text-truncate--end--mZWeX,.PageHeader-module--bx--text-truncate--front--3zvrI{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.PageHeader-module--bx--text-truncate--front--3zvrI{direction:rtl}.PageHeader-module--page-header--3hIan{--height:20rem;height:20rem;height:var(--height);background:#000;color:#fff;width:100%;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:1px solid #3d3d3d}.PageHeader-module--with-tabs--3nKxA{height:calc(var(--height) - 3rem)}.PageHeader-module--text--o9LFq{font-size:2.625rem;font-weight:300;line-height:119%;letter-spacing:0;font-size:calc(2.625rem + 0*(100vw - 20rem)/22);margin-bottom:2rem;margin-top:auto}@media (min-width:42rem){.PageHeader-module--text--o9LFq{font-size:2.625rem;font-size:calc(2.625rem + 0.75*(100vw - 42rem)/24)}}@media (min-width:66rem){.PageHeader-module--text--o9LFq{font-size:3.375rem;font-size:calc(3.375rem + 0.375*(100vw - 66rem)/16)}}@media (min-width:82rem){.PageHeader-module--text--o9LFq{font-size:3.75rem;line-height:117%;font-size:calc(3.75rem + 1*(100vw - 82rem)/17)}}@media (min-width:99rem){.PageHeader-module--text--o9LFq{line-height:113%;font-size:4.75rem}}.EditLink-module--bx--text-truncate--end--2pqje,.EditLink-module--bx--text-truncate--front--3_lIE{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.EditLink-module--bx--text-truncate--front--3_lIE{direction:rtl}.EditLink-module--link--1qzW3{font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px;-webkit-transition:color .11s;transition:color .11s;color:#565656}.EditLink-module--link--1qzW3:hover{color:#171717}.EditLink-module--row--1B9Gk{position:relative;top:9rem}.container--dark .EditLink-module--link--1qzW3,.container--dark .EditLink-module--link--1qzW3:hover{color:#fff}.PageTabs-module--bx--text-truncate--end--267NA,.PageTabs-module--bx--text-truncate--front--3xEQF{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.PageTabs-module--bx--text-truncate--front--3xEQF{direction:rtl}.PageTabs-module--tabs-container--8N4k0{margin:0;width:100%;background:#000;position:-webkit-sticky;position:sticky;top:3rem;z-index:6000}.PageTabs-module--list--3eFQc{display:flex;flex-direction:row;width:100%;list-style:none;padding:0;overflow-x:auto;scrollbar-width:none}.PageTabs-module--list-item--nUmtD{display:flex}.PageTabs-module--link--1mDJ1{font-size:1rem;font-weight:400;line-height:1.375rem;letter-spacing:0;padding:13px 1rem 0;text-decoration:none;line-height:1;color:#fff;white-space:nowrap;border-top:3px solid transparent;height:3rem;-webkit-transition:all .15s cubic-bezier(.2,0,.38,.9);transition:all .15s cubic-bezier(.2,0,.38,.9)}@media (min-width:42rem){.PageTabs-module--link--1mDJ1{padding-right:3rem}}.PageTabs-module--link--1mDJ1:hover{background:#353535}.PageTabs-module--selected-item--YPVr3 .PageTabs-module--link--1mDJ1{border-top:3px solid #0062ff;background:#3d3d3d}.PageTabs-module--list-item--nUmtD:not(.PageTabs-module--selected-item--YPVr3) .PageTabs-module--link--1mDJ1{color:#bebebe}.PageTabs-module--list-item--nUmtD:not(.PageTabs-module--selected-item--YPVr3) .PageTabs-module--link--1mDJ1:hover{color:#fff}
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div
class="bx--select">
<label for="select-id" class="bx--label">Select label</label>
<div class="bx--select-input__wrapper" >
<select id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>
Choose an option
</option>
<option class="bx--select-option" value="solong" >
A much longer option that is worth having around to check how text flows
</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
</div>
</div>
</div>
<div class="bx--form-item">
<div
class="bx--select bx--select--disabled">
<label for="select-id-disabled" class="bx--label bx--label--disabled">Select
label</label>
<div class="bx--select-input__wrapper" >
<select id="select-id-disabled" class="bx--select-input" disabled>
<option class="bx--select-option" value="" disabled selected hidden>Choose an option </option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option> <optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> <optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> </select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
</div>
</div>
</div>
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div
class="bx--select">
<label for="select-id" class="bx--label">Select label</label>
<div class="bx--form__helper-text">Optional helper text.</div>
<div class="bx--select-input__wrapper" >
<select id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>
Choose an option
</option>
<option class="bx--select-option" value="solong" >
A much longer option that is worth having around to check how text flows
</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
</div>
</div>
</div>
<div class="bx--form-item">
<div
class="bx--select bx--select--disabled">
<label for="select-id-disabled" class="bx--label bx--label--disabled">Select
label</label>
<div class="bx--form__helper-text">Optional helper text.</div>
<div class="bx--select-input__wrapper" >
<select id="select-id-disabled" class="bx--select-input" disabled>
<option class="bx--select-option" value="" disabled selected hidden>Choose an option </option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option> <optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> <optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> </select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
</div>
</div>
</div>
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div
class="bx--select bx--select--invalid">
<label for="select-id" class="bx--label">Select label</label>
<div class="bx--select-input__wrapper" data-invalid>
<select id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>
Choose an option
</option>
<option class="bx--select-option" value="solong" >
A much longer option that is worth having around to check how text flows
</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
</div>
<div class="bx--form-requirement">
Validation message here
</div>
</div>
</div>
</div>
<div class="bx--form-item">
<div
class="bx--select bx--select--invalid bx--select--disabled">
<label for="select-id-disabled" class="bx--label bx--label--disabled">Select
label</label>
<div class="bx--select-input__wrapper" data-invalid>
<select id="select-id-disabled" class="bx--select-input" disabled>
<option class="bx--select-option" value="" disabled selected hidden>Choose an option </option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option> <optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> <optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> </select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
<div class="bx--form-requirement">
Validation message here
</div>
</div>
</div>
</div>
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div
class="bx--select bx--select--inline">
<label for="select-id" class="bx--label">Select label</label>
<div class="bx--select-input--inline__wrapper">
<div class="bx--select-input__wrapper" >
<select id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>
Choose an option
</option>
<option class="bx--select-option" value="solong" >
A much longer option that is worth having around to check how text flows
</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
</div>
</div>
</div>
<div class="bx--form-item">
<div
class="bx--select bx--select--inline bx--select--disabled">
<label for="select-id-disabled" class="bx--label bx--label--disabled">Select
label</label>
<div class="bx--select-input--inline__wrapper">
<div class="bx--select-input__wrapper" >
<select id="select-id-disabled" class="bx--select-input" disabled>
<option class="bx--select-option" value="" disabled selected hidden>Choose an option </option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option> <optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> <optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> </select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
</div>
</div>
</div>
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div
class="bx--select bx--select--inline">
<label for="select-id" class="bx--label">Select label</label>
<div class="bx--select-input--inline__wrapper">
<div class="bx--select-input__wrapper" >
<select id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>
Choose an option
</option>
<option class="bx--select-option" value="solong" >
A much longer option that is worth having around to check how text flows
</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
</div>
<div class="bx--form__helper-text">Optional helper text.</div>
</div>
</div>
<div class="bx--form-item">
<div
class="bx--select bx--select--inline bx--select--disabled">
<label for="select-id-disabled" class="bx--label bx--label--disabled">Select
label</label>
<div class="bx--select-input--inline__wrapper">
<div class="bx--select-input__wrapper" >
<select id="select-id-disabled" class="bx--select-input" disabled>
<option class="bx--select-option" value="" disabled selected hidden>Choose an option </option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option> <optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> <optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> </select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
</div>
<div class="bx--form__helper-text">Optional helper text.</div>
</div>
</div>
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div
class="bx--select bx--select--inline bx--select--invalid">
<label for="select-id" class="bx--label">Select label</label>
<div class="bx--select-input--inline__wrapper">
<div class="bx--select-input__wrapper" data-invalid>
<select id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>
Choose an option
</option>
<option class="bx--select-option" value="solong" >
A much longer option that is worth having around to check how text flows
</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
</div>
<div class="bx--form-requirement">
Validation message here
</div>
</div>
</div>
</div>
<div class="bx--form-item">
<div
class="bx--select bx--select--inline bx--select--invalid bx--select--disabled">
<label for="select-id-disabled" class="bx--label bx--label--disabled">Select
label</label>
<div class="bx--select-input--inline__wrapper">
<div class="bx--select-input__wrapper" data-invalid>
<select id="select-id-disabled" class="bx--select-input" disabled>
<option class="bx--select-option" value="" disabled selected hidden>Choose an option </option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option> <optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> <optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> </select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
<div class="bx--form-requirement">
Validation message here
</div>
</div>
</div>
</div>
Use these modifiers with .bx--select
class.
Name | Description |
---|---|
.bx--select--inline |
Selector for applying inline select styles |
.bx--select--light |
Selector for applying light select styles |
The width of the inline select box should be the width of the default placeholder text + 16px/1rem of padding. There should be 10px of padding between the placeholder text and the caret.
Carbon Components provides HTML attributes and CSS to enable form validation for each input or control.
For example, here's a Select that provides a message if an option is not selected.
<div class="bx--form-item">
<div class="bx--select">
<select data-invalid id="select-id" class="bx--select-input"
>...</select
>
...
</div>
<svg
class="bx--select__arrow"
width="10"
height="5"
viewBox="0 0 10 5"
fill-rule="evenodd"
>
<path d="M10 0L5 5 0 0z"></path>
</svg>
<label for="select-id" class="bx--label">Select</label>
<div class="bx--form-requirement">Please select an option.</div>
</div>
The bx--form-requirement
element will be hidden until data-invalid
attribute
gets added to the select
child of bx--select
. Validate the select on your
own and then use JavaScript to add the attribute if the select value is invalid.
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div
class="bx--select bx--select--invalid">
<label for="select-id" class="bx--label">Select label</label>
<div class="bx--select-input__wrapper" data-invalid>
<select id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>
Choose an option
</option>
<option class="bx--select-option" value="solong" >
A much longer option that is worth having around to check how text flows
</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
</div>
<div class="bx--form-requirement">
Validation message here
</div>
</div>
</div>
</div>
<div class="bx--form-item">
<div
class="bx--select bx--select--invalid bx--select--disabled">
<label for="select-id-disabled" class="bx--label bx--label--disabled">Select
label</label>
<div class="bx--select-input__wrapper" data-invalid>
<select id="select-id-disabled" class="bx--select-input" disabled>
<option class="bx--select-option" value="" disabled selected hidden>Choose an option </option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option> <optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> <optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> </select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
<div class="bx--form-requirement">
Validation message here
</div>
</div>
</div>
</div>
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div
class="bx--select bx--select--inline">
<label for="select-id" class="bx--label">Select label</label>
<div class="bx--select-input--inline__wrapper">
<div class="bx--select-input__wrapper" >
<select id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>
Choose an option
</option>
<option class="bx--select-option" value="solong" >
A much longer option that is worth having around to check how text flows
</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
</div>
</div>
</div>
<div class="bx--form-item">
<div
class="bx--select bx--select--inline bx--select--disabled">
<label for="select-id-disabled" class="bx--label bx--label--disabled">Select
label</label>
<div class="bx--select-input--inline__wrapper">
<div class="bx--select-input__wrapper" >
<select id="select-id-disabled" class="bx--select-input" disabled>
<option class="bx--select-option" value="" disabled selected hidden>Choose an option </option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option> <optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> <optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> </select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
</div>
</div>
</div>
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div
class="bx--select bx--select--inline">
<label for="select-id" class="bx--label">Select label</label>
<div class="bx--select-input--inline__wrapper">
<div class="bx--select-input__wrapper" >
<select id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>
Choose an option
</option>
<option class="bx--select-option" value="solong" >
A much longer option that is worth having around to check how text flows
</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
</div>
<div class="bx--form__helper-text">Optional helper text.</div>
</div>
</div>
<div class="bx--form-item">
<div
class="bx--select bx--select--inline bx--select--disabled">
<label for="select-id-disabled" class="bx--label bx--label--disabled">Select
label</label>
<div class="bx--select-input--inline__wrapper">
<div class="bx--select-input__wrapper" >
<select id="select-id-disabled" class="bx--select-input" disabled>
<option class="bx--select-option" value="" disabled selected hidden>Choose an option </option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option> <optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> <optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> </select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
</div>
<div class="bx--form__helper-text">Optional helper text.</div>
</div>
</div>
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div
class="bx--select bx--select--inline bx--select--invalid">
<label for="select-id" class="bx--label">Select label</label>
<div class="bx--select-input--inline__wrapper">
<div class="bx--select-input__wrapper" data-invalid>
<select id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>
Choose an option
</option>
<option class="bx--select-option" value="solong" >
A much longer option that is worth having around to check how text flows
</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >
Option 1
</option>
<option class="bx--select-option" value="option2" >
Option 2
</option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
</div>
<div class="bx--form-requirement">
Validation message here
</div>
</div>
</div>
</div>
<div class="bx--form-item">
<div
class="bx--select bx--select--inline bx--select--invalid bx--select--disabled">
<label for="select-id-disabled" class="bx--label bx--label--disabled">Select
label</label>
<div class="bx--select-input--inline__wrapper">
<div class="bx--select-input__wrapper" data-invalid>
<select id="select-id-disabled" class="bx--select-input" disabled>
<option class="bx--select-option" value="" disabled selected hidden>Choose an option </option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option> <optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> <optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> </select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
<div class="bx--form-requirement">
Validation message here
</div>
</div>
</div>
</div>
Use these modifiers with .bx--select
class.
Name | Description |
---|---|
.bx--select--inline |
Selector for applying inline select styles |
.bx--select--light |
Selector for applying light select styles |
The width of the inline select box should be the width of the default placeholder text + 16px/1rem of padding. There should be 10px of padding between the placeholder text and the caret.
Carbon Components provides HTML attributes and CSS to enable form validation for each input or control.
For example, here's a Select that provides a message if an option is not selected.
<div class="bx--form-item">
<div class="bx--select">
<select data-invalid id="select-id" class="bx--select-input"
>...</select
>
...
</div>
<svg
class="bx--select__arrow"
width="10"
height="5"
viewBox="0 0 10 5"
fill-rule="evenodd"
>
<path d="M10 0L5 5 0 0z"></path>
</svg>
<label for="select-id" class="bx--label">Select</label>
<div class="bx--form-requirement">Please select an option.</div>
</div>
The bx--form-requirement
element will be hidden until data-invalid
attribute
gets added to the select
child of bx--select
. Validate the select on your
own and then use JavaScript to add the attribute if the select value is invalid.