Select

Selects allow users to select from a single-option menu. It functions as a wrapper around the browser's native <select> element.

Demos

Basic Usage

<mdc-select> is a web component. All we need to do is put the required script into your HTML document. Then follow <mdc-select>'s html structure and everything will be all set.

Required Script

<script async
        src="https://your-domain/pack-mdc-select.js">        
</script>

Structure

Put the select inside <mdc-select> as its child.
<label>'s content will be present as placeholder.

Note: the slot attribute must be present on <select>.

<mdc-select data-type="filled">
  <select name="mdc-select" slot="select">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="banana">Banana</option>
  </select>
  <label>Fruit</label>
</mdc-select>

JavaScript Instantiation

<mdc-select> could also use JavaScript to create DOM element. Here comes some examples.

<script>
  var nodeAPI, nodeClasses;

  //use DOM api
  nodeAPI = document.createElement('mdc-select');
  document.body.appendChild(nodeAPI);
  nodeAPI.name = 'YourName';
  nodeAPI.value = 'YourValue';

  //new Classes
  nodeClasses = new MdcSelect();
  document.body.appendChild(nodeClasses);
  nodeClasses.name = 'YourName';
  nodeClasses.value = 'YourValue';  
</script>

Style Customization

<mdc-select> use CSS variables to style its interface. That means developer could easy change them into the lookup you like.

<style>
mdc-select {
  --theme-color: #018786;
  --label: rgba(0,0,0,.6);
  --border-color: rgba(142,142,142,.5);
  --border-color-hover: rgba(142,142,142,1);
  --bgcolor: rgba(245,245,245,.5);
  --bgcolor-hover: rgba(245,245,245,1);
}
</style>

Variants

<mdc-select> supports some common state to let it become more convenience & useful.

Disabled

Note that mdc-select[disabled] will trigger <mdc-select> into disabled state.

<mdc-select data-type="filled" disabled>
  <select name="mdc-select" slot="select">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="banana">Banana</option>
  </select>
  <label>Fruit</label>
</mdc-select>

Readonly

Note that mdc-select[readonly] will trigger <mdc-select> into readonly state.

<mdc-select data-type="filled" readonly>
  <select name="mdc-select" slot="select">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="banana">Banana</option>
  </select>
  <label>Fruit</label>
</mdc-select>

<mdc-select> also supports several style for different usages. Developer could just modify attribute data-type or mdc-select's property type.

Filled

<mdc-select data-type="filled">
  <select name="mdc-select" slot="select">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="banana">Banana</option>
  </select>
  <label>Fruit</label>
</mdc-select>

Shaped Filled

<mdc-select data-type="shaped-filled">
  <select name="mdc-select" slot="select">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="banana">Banana</option>
  </select>
  <label>Fruit</label>
</mdc-select>

Outlined

<mdc-select data-type="outlined">
  <select name="mdc-select" slot="select">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="banana">Banana</option>
  </select>
  <label>Fruit</label>
</mdc-select>

Shaped Outlined

<mdc-select data-type="shaped-outlined">
  <select name="mdc-select" slot="select">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="banana">Banana</option>
  </select>
  <label>Fruit</label>
</mdc-select>

Properties