Components

Select

Variations on Select.

  • Germany
  • Russia
  • Belarus
keyboard_arrow_down
  • Germany
  • Russia
  • Belarus
Simple Select
Simple Select with arrow
<!-- Simple Select -->
    <div class="mdl-textfield mdl-js-textfield getmdl-select">
        <input type="text" value="" class="mdl-textfield__input" id="sample1" readonly>
        <input type="hidden" value="" name="sample1">
        <label for="sample1" class="mdl-textfield__label">Country</label>
        <ul for="sample1" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="DEU">Germany</li>
            <li class="mdl-menu__item" data-val="BLR">Belarus</li>
            <li class="mdl-menu__item" data-val="RUS">Russia</li>
        </ul>
    </div>
                                            <!-- Simple Select with arrow -->
    <div class="mdl-textfield mdl-js-textfield getmdl-select">
        <input type="text" value="" class="mdl-textfield__input" id="sample2" readonly>
        <input type="hidden" value="" name="sample2">
        <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
        <label for="sample2" class="mdl-textfield__label">Country</label>
        <ul for="sample2" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="DEU">Germany</li>
            <li class="mdl-menu__item" data-val="BLR">Belarus</li>
            <li class="mdl-menu__item" data-val="RUS">Russia</li>
        </ul>
    </div>
  • Germany
  • Russia
  • Belarus
  • Germany
  • Russia
  • Belarus
Select with floating label
Select with floating label and arrow
<!-- Select with floating label -->
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
        <input type="text" value="" class="mdl-textfield__input" id="sample3" readonly>
        <input type="hidden" value="" name="sample3">
        <label for="sample3" class="mdl-textfield__label">Country</label>
        <ul for="sample3" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="DEU">Germany</li>
            <li class="mdl-menu__item" data-val="BLR">Belarus</li>
            <li class="mdl-menu__item" data-val="RUS">Russia</li>
        </ul>
    </div>
                                            <!-- Select with floating label and arrow -->
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
        <input type="text" value="" class="mdl-textfield__input" id="sample4" readonly>
        <input type="hidden" value="" name="sample4">
        <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
        <label for="sample4" class="mdl-textfield__label">Country</label>
        <ul for="sample4" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="DEU">Germany</li>
            <li class="mdl-menu__item" data-val="BLR">Belarus</li>
            <li class="mdl-menu__item" data-val="RUS">Russia</li>
        </ul>
    </div>
  • Belarus
  • Brazil
  • Estonia
  • Finland
  • France
  • Germany
  • Poland
  • Russia
keyboard_arrow_down
  • Belarus
  • Brazil
  • Estonia
  • Finland
  • France
  • Germany
  • Poland
  • Russia
Select with fixed height
Pre-selected value
<!-- Select with fixed height -->
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height">
        <input type="text" value="" class="mdl-textfield__input" id="sample5" readonly>
        <input type="hidden" value="" name="sample5">
        <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
        <label for="sample5" class="mdl-textfield__label">Country</label>
        <ul for="sample5" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="BY">Belarus</li>
            <li class="mdl-menu__item" data-val="BR">Brazil</li>
            <li class="mdl-menu__item" data-val="ES">Estonia</li>
            <li class="mdl-menu__item" data-val="FI">Finland</li>
            <li class="mdl-menu__item" data-val="FR">France</li>
            <li class="mdl-menu__item" data-val="DE">Germany</li>
            <li class="mdl-menu__item" data-val="PL">Poland</li>
            <li class="mdl-menu__item" data-val="RU">Russia</li>
        </ul>
    </div>
        <!-- Pre-selected value -->
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height">
        <input type="text" value="" class="mdl-textfield__input" id="sample6" readonly>
        <input type="hidden" value="" name="sample6">
        <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
        <label for="sample6" class="mdl-textfield__label">Country</label>
        <ul for="sample6" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="BY" data-selected="true">Belarus</li>
            <li class="mdl-menu__item" data-val="BR">Brazil</li>
            <li class="mdl-menu__item" data-val="ES">Estonia</li>
            <li class="mdl-menu__item" data-val="FI">Finland</li>
            <li class="mdl-menu__item" data-val="FR">France</li>
            <li class="mdl-menu__item" data-val="DE">Germany</li>
            <li class="mdl-menu__item" data-val="PL">Poland</li>
            <li class="mdl-menu__item" data-val="RU">Russia</li>
        </ul>
    </div>

Introduction

The select component is an enhanced version of the standard HTML <input type="text">. A text field consists of a horizontal line indicating where select item displayed and and native mdl menu. The select component has mdl menu style.

Configuration options

The MDL CSS classes apply various predefined visual and behavioral enhancements to the select. The table below lists the available classes and their effects.

MDL class Effect Remarks
getmdl-select__fix-height Limits height to 300px and add vertically scrollbar Required
Download