# mdl-selectfield Material Design Lite selectfield component (https://github.com/google/material-design-lite) [![Bower Version](https://img.shields.io/bower/v/mdl-selectfield.svg)](https://github.com/mebibou/mdl-selectfield) [![NPM Version](https://img.shields.io/npm/v/mdl-selectfield.svg)](https://www.npmjs.com/package/mdl-selectfield) [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](https://github.com/mebibou/mdl-selectfield/blob/master/LICENSE) [![bitHound Overall Score](https://www.bithound.io/github/mebibou/mdl-selectfield/badges/score.svg)](https://www.bithound.io/github/mebibou/mdl-selectfield) [![bitHound Dependencies](https://www.bithound.io/github/mebibou/mdl-selectfield/badges/dependencies.svg)](https://www.bithound.io/github/mebibou/mdl-selectfield/master/dependencies/npm) [![bitHound Dev Dependencies](https://www.bithound.io/github/mebibou/mdl-selectfield/badges/devDependencies.svg)](https://www.bithound.io/github/mebibou/mdl-selectfield/master/dependencies/npm) [![bitHound Code](https://www.bithound.io/github/mebibou/mdl-selectfield/badges/code.svg)](https://www.bithound.io/github/mebibou/mdl-selectfield) > A custom implementation of a selectfield component for [Material Design Lite](https://github.com/google/material-design-lite) ## Live Example Check out the [CodePen](http://codepen.io/mebibou/pen/pjEjOv) ## Install Via bower: ```` bower install mdl-selectfield ```` Or via npm: ```` npm install mdl-selectfield ```` Then include in your html: ```` ... ```` ## Basic use To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `` section of the page, as described in the MDL Introduction. ### To include a MDL **select field** component: 1. Code a `

` element to hold the text field. ```html

...

``` 2. Inside the div, code an `

``` 3. Also inside the div, after the select field, code a `` element with a `for` attribute whose value matches the `select` element's `id` value, and a short string to be used as the field's placeholder text. ```html

User gender

``` 4. Add one or more MDL classes, separated by spaces, to the div container, select field, select label, and error message using the `class` attribute. ```html

User gender Select a value

``` The select field component is ready for use. #### Examples Select field with a standard label. ```html

User gender Select a value

``` Select field with a floating label. ```html

User gender Select a value

``` Select field with a standard label, and error message. ```html

User gender Select a value

``` Select field with a floating label and icon. ```html

User gender

```