@carbon/charts
Version:
Carbon charting components
144 lines (137 loc) • 6.5 kB
HTML
<!--
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--list-box__wrapper ">
<label class="bx--label">List box label</label>
<div class="bx--form__helper-text">Optional helper text here</div>
<div
class="bx--list-box bx--list-box--light">
<div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu"
aria-expanded="false" aria-haspopup="true">
<span class="bx--list-box__label">List box options</span>
<div class="bx--list-box__menu-icon">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-label="Open menu" width="16" height="16" viewBox="0 0 16 16" role="img"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</div>
</div>
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--list-box__wrapper ">
<label class="bx--label">List box label</label>
<div class="bx--form__helper-text">Optional helper text here</div>
<div
class="bx--list-box bx--list-box--light"
data-invalid>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--list-box__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 role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu"
aria-expanded="false" aria-haspopup="true">
<span class="bx--list-box__label">List box options</span>
<div class="bx--list-box__menu-icon">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-label="Open menu" width="16" height="16" viewBox="0 0 16 16" role="img"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</div>
</div>
</div>
<div class="bx--form-requirement">
Validation message here
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--list-box__wrapper ">
<label class="bx--label bx--label--disabled">List box label</label>
<div class="bx--form__helper-text bx--form__helper-text--disabled">Optional helper text
here
</div>
<div
class="bx--list-box bx--list-box--disabled bx--list-box--light"
data-invalid>
<div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu"
aria-expanded="false" aria-haspopup="true">
<span class="bx--list-box__label">List box options</span>
<div class="bx--list-box__menu-icon">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-label="Open menu" width="16" height="16" viewBox="0 0 16 16" role="img"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</div>
</div>
</div>
<div class="bx--form-requirement">
Validation message here
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--list-box__wrapper ">
<label class="bx--label bx--label--disabled">List box label</label>
<div class="bx--form__helper-text bx--form__helper-text--disabled">Optional helper text
here
</div>
<div
class="bx--list-box bx--list-box--disabled bx--list-box--light">
<div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu"
aria-expanded="false" aria-haspopup="true">
<span class="bx--list-box__label">List box options</span>
<div class="bx--list-box__menu-icon">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-label="Open menu" width="16" height="16" viewBox="0 0 16 16" role="img"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</div>
</div>
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--list-box__wrapper ">
<label class="bx--label">List box label</label>
<div class="bx--form__helper-text">Optional helper text
here
</div>
<div
class="bx--list-box bx--list-box--expanded bx--list-box--light">
<div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu"
aria-expanded="true" aria-haspopup="true">
<span class="bx--list-box__label">List box options</span>
<div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-label="Close menu" width="16" height="16" viewBox="0 0 16 16" role="img"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</div>
</div>
<ul class="bx--list-box__menu" role="combobox">
<li
class="bx--list-box__menu-item bx--list-box__menu-item--highlighted"
id="downshift-1-item-0">
<div class="bx--list-box__menu-item__option" tabindex="0">
Option 1
</div>
</li>
<li
class="bx--list-box__menu-item"
id="downshift-1-item-1">
<div class="bx--list-box__menu-item__option" tabindex="0">
Option 2
</div>
</li>
<li
class="bx--list-box__menu-item"
id="downshift-1-item-2">
<div class="bx--list-box__menu-item__option" tabindex="0">
Option 3
</div>
</li>
<li
class="bx--list-box__menu-item"
id="downshift-1-item-3">
<div class="bx--list-box__menu-item__option" tabindex="0">
Option 4
</div>
</li>
<li
class="bx--list-box__menu-item"
id="downshift-1-item-4">
<div class="bx--list-box__menu-item__option" tabindex="0">
An example option that is really long to show what should be done to handle long text
</div>
</li>
</ul>
</div>
</div>
</div>