Select

Vanilla JS
Code:
<!--
  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>

Select with helper text

Optional helper text.
Optional helper text.
Code:
<!--
  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>

Select invalid

Validation message here
Validation message here
Vanilla JS
Code:
<!--
  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>

Inline select

Code:
<!--
  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>

Inline select with helper text

Optional helper text.
Optional helper text.
Code:
<!--
  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>

Inline select invalid

Validation message here
Validation message here
Code:
<!--
  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>

Documentation

SCSS

Modifiers

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

Inline Select width

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.

Using Form Validation

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.