import React from 'react';
import { dripForm } from 'react-drip-form';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';
import {
  AutoComplete,
  Checkbox,
  DatePicker,
  FieldGroup,
  RadioButton,
  SelectField,
  Slider,
  TextField,
  TimePicker,
  Toggle,
} from 'react-drip-material-ui';
 
 
export default dripForm({/* form options */})(({ handlers }) => (
  <form onSubmit={handlers.onSubmit}>
    {/* TextField */}
    <TextField
      name="title"
      label="Title"
      floatingLabelText="Title"
      hintText="Enter title"
    />
 
    {/* TextField (multi line) */}
    <TextField
      name="description"
      label="Description"
      multiLine
      rows={4}
      rowsMax={10}
      floatingLabelText="Description"
      hintText="Enter a description"
    />
 
    {/* Select field */}
    <SelectField
      name="library"
      label="Library"
      floatingLabelText="Library"
    >
      <MenuItem value="react" primaryText="React" />
      <MenuItem value="angular" primaryText="Angular" />
      <MenuItem value="vue" primaryText="Vue" />
    </SelectField>
 
    {/* Checkbox with FieldGroup field */}
    <FieldGroup
      multiple
      name="category"
      label="Category"
    >
      <Checkbox value="cat1" labelText="Category 1" />
      <Checkbox value="cat2" labelText="Category 2" />
      <Checkbox value="cat3" labelText="Category 3" />
    </FieldGroup>
 
    {/* Radio with FieldGroup field (default value = 'private') */}
    <FieldGroup
      name="status"
      label="Status"
      value="private"
    >
      <RadioButton value="private" labelText="Private" />
      <RadioButton value="public" labelText="Public" />
      <RadioButton value="draft" labelText="Draft" />
    </FieldGroup>
 
    {/* Date Picker */}
    <DatePicker
      name="releaseDate"
      label="Release Date"
      floatingLabelText="Release Date"
      hintText="Select release date"
    />
 
    {/* Time Picker */}
    <TimePicker
      name="releaseTime"
      label="Release Time"
      floatingLabelText="Release Time"
      hintText="Select release time"
    />
 
    {/* Slider */}
    <Slider
      name="rating"
      label="Rating"
      min={0}
      max={100}
      step={1}
    />
 
    {/* Toggle */}
    <Toggle
      name="confirm"
      value="yes"
      label="Confirm"
      labelText="I agree to the Terms of Use"
      labelPosition="right"
    />
 
    <RaisedButton
      primary
      label="Submit"
      onClick={handlers.onSubmit}
    />
  </form>
));

({ meta }) => !!(meta.error && meta.dirty && meta.touched)

<Toggle
  name="confirm"
  value="yes"
  label="Confirm"
  labelText="I agree to the Terms of Use"
  labelPosition="right"
/>

<DatePicker
  name="releaseDate"
  errorLabelStyle={{
    // your custom style
    color: 'hotpink',
  }}
/>