mdl-selectfield
Advanced tools
Material Design Lite selectfield component (https://github.com/google/material-design-lite)
A custom implementation of a selectfield component for Material Design Lite
Check out the CodePen
Via bower:
bower install mdl-selectfield
Or via npm:
npm install mdl-selectfield
Then include in your html:
<link rel="stylesheet" href="./bower_components/mdl-selectfield/dist/mdl-selectfield.min.css">
...
<script src="./bower_components/mdl-selectfield/dist/mdl-selectfield.min.js"></script>
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the <head> section of the page, as described in the MDL Introduction.
1. Code a <div> element to hold the text field.
<div>
...
</div>
2. Inside the div, code an <select> element, add the options and add an id attribute of your choice.
<div>
<select id="gender">
<option value=""></option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
3. Also inside the div, after the select field, code a <label> 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.
<div>
<select id="gender">
<option value=""></option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
<label for="gender">User gender</label>
</div>
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.
<div class="mdl-selectfield mdl-js-selectfield">
<select id="gender" class="mdl-selectfield__select">
<option value=""></option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
<label class="mdl-selectfield__label" for="gender">User gender</label>
<span class="mdl-selectfield__error">Select a value</span>
</div>
The select field component is ready for use.
Select field with a standard label.
<div class="mdl-selectfield mdl-js-selectfield">
<select id="gender" class="mdl-selectfield__select">
<option value=""></option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
<label class="mdl-selectfield__label" for="gender">User gender</label>
<span class="mdl-selectfield__error">Select a value</span>
</div>
Select field with a floating label.
<div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
<select id="gender" class="mdl-selectfield__select">
<option value=""></option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
<label class="mdl-selectfield__label" for="gender">User gender</label>
<span class="mdl-selectfield__error">Select a value</span>
</div>
Select field with a standard label, and error message.
<div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
<select id="gender" class="mdl-selectfield__select">
<option value=""></option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
<label class="mdl-selectfield__label" for="gender">User gender</label>
<span class="mdl-textfield__error">Select a value</span>
</div>
Select field with a floating label and icon.
<div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
<select id="gender" class="mdl-selectfield__select">
<option value=""></option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
<div class="mdl-selectfield__icon"><i class="material-icons">arrow_drop_down</i></div>
<label class="mdl-selectfield__label" for="gender">User gender</label>
</div>
FAQs
mdl-selectfield for material-design-lite
We found that mdl-selectfield demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.