React MDL SelectField Component

Usage no npm install needed!

<script type="module">
  import reactMdlSelectfield from '';


React-MDL SelectField

Selectfield component for React Material Design Lite


npm install --save react-mdl-selectfield


I am in a process of rewriting SelectField and MultiSelectField to be completely stateless. Because of this, examples wont work as expected. I will update them soon ;)

git clone
cd react-mdl-selectfield
npm install
npm run storybook
open http://localhost:9002/


import { SelectField, Option } from 'react-mdl-selectfield';

render() {
  return() (
    <SelectField label={'Select me'} value={3}>
      <Option value={1}>One</Option>
      <Option value={2}>Two</Option>
      <Option value={3}>Three</Option>
      <Option value={4}>Four</Option>
      <Option value={5}>Five</Option>

<Option> component requires a string children prop for filtering to work. This sucks, because you cannot put anything complex (such as Icon) inside Option. That is why AutoCompleteField component is on its way ;) Until then you should stringify your <Option> children:

<SelectField label={'Select me'}>
  { =>
    <Option key={} value={}>
      {`${user.first_name} ${user.last_name}`}


  • Add readOnly prop to SelectField and MultiSelectField
  • Make SelectField and MultiSelectField completely stateless
  • Create AutoCompleteField
  • Pray for a good Selectfield in mdl v2

Component boilerplate

Using react-component-boilerplate with some modifications and improvements.